Добавить классы к дочерним элементам при нажатии на родительский элемент - PullRequest
Новая
       17

Добавить классы к дочерним элементам при нажатии на родительский элемент

0 голосов
/ 13 февраля 2019

Что ожидается: когда пользователь нажимает кнопку, классы добавляются / удаляются из обоих родительского элемента и некоторых дочерних элементов (чтобы развернуть / свернуть поле ввода текста)

Что я пробовал: я пытался использовать * ngIf на родительском элементе вместе с кнопкой, которая связана с событием click, которое переключает видимость родительского div.При нажатии кнопки родительский элемент div (и, следовательно, все дочерние элементы) удаляются из DOM.При повторном нажатии все добавляется обратно в DOM.Это работает, но это не то, что не очень хорошо работает в плане дизайна.

Я хотел бы связать [ngClass] с нажатием кнопки, что каким-то образом добавит / удалит классы в родительский элементи его дочерние элементы.В приведенном ниже коде я просто использую событие щелчка [ngClass] и отдельную кнопку, которая связана с этим событием щелчка.Это вроде работает, но не полностью, потому что эта кнопка не привязана к [ngClass], и нажатие в любом месте поля приводит к добавлению класса, что приводит к свертыванию текстового поля, когда это не нужно - только сама кнопка«работает», потому что он расположен внутри div 'flex-full-layout section-white-background'.Текстовое поле должно разворачиваться / разворачиваться только при нажатии кнопки.Я хотел бы иметь возможность добавлять / удалять классы из родительских и дочерних элементов, нажав эту единственную кнопку

HTML: 

<div class="layout-column flex-full-layout flex-50 column-one">
    <button (click)="showHide()" id="btToggle" class="btn btn-info btn-sm ToggleVisibility" >{{buttonName}}</button>
    <div class="flex-full-layout section-white-background (click)="showHide()" [ngClass]="status ? 'open' : 'closed'"> 
      <fieldset class="no-bottom-padding">
        <legend class="ce-patient-legend-style">Insurance</legend>
        ## unneeded stuff
      </fieldset>
</div>

TS: 

  status: boolean = false;
  buttonName : any = '-';

  showHide(){
    this.status = !this.status;  

if(this.status) 
  this.buttonName = "+";
else
  this.buttonName = "-"
  }

«Open» и «closed» - это классы, которые устанавливаются в [ngClass].Затем я устанавливаю CSS для обоих этих классов, и этот CSS применяется в зависимости от того, какой класс активен

CSS: 

.open {
  height: 17px;
}

.closed {
  height: 100%;
}

При нажатии на кнопку «ToggleVisibility» следует добавить / удалить классы.как из родительского элемента 'flex-full-layout section-white-background', так и из его дочерних элементов

1 Ответ

0 голосов
/ 13 февраля 2019

Директива ngClass используется для включения или выключения определенных классов, но вы не указываете внутри своего ngClass, какие классы устанавливать / изменять.

Попробуйте вместо этого: 

<div class="flex-full-layout section-white-background" 
     [ngClass]="{open: status, closed: !status}">
  ...your child elements here...
</div>

Устанавливает или удаляет классы open и closed на основе текущего значения status.

Кроме того, если вы удалите (click)="showHide()" из вашего div, это должно сделать кнопкуединственный источник изменений, а не установка класса, когда вы щелкаете в любом месте внутри поля.

...