Как сделать так, чтобы определенный тег появлялся при клике и скрывал другой тег в div?

Question

Я пытаюсь сделать простой компонент, который просто меняет значок img при клике, это два простых изображения.Проблема в том, что значок закрытия даже не отображается, а значок, который нужно открыть, не скрывается, когда я нажимаю на него.

Я пытался добавить (click)="isVisible = !isVisible" и [ngClass]="{ 'isVisible': isVisible }"

Кажется, ничего из этого не работает, вот мой HTML:

<div class="toggle" (click)="isVisible = !isVisible">
    <div class="icon">
      <img src="https://image.flaticon.com/icons/png/512/64/64576.png" class="icon-open" alt>
      <img src="https://image.flaticon.com/icons/png/512/24/24139.png" class="icon-close"
        [ngClass]="{ 'isVisible': isVisible }" alt>
    </div>
</div>

Я ожидаю .icon-closeчтобы показать и «.icon-open» скрыть, когда я нажимаю .toggle

Answer 1

Поскольку вы используете функцию скрытия и отображения, вам нужно создать два класса для скрытия и отображения, например.

.block {
  display: block;
}
.none {
  display: none;
}

и использовать его как

<div class="toggle" (click)="isVisible = !isVisible">
<div class="icon">
  <img src="https://image.flaticon.com/icons/png/512/64/64576.png" height="30px" class="icon-open"  [ngClass]="{ 'isVisible': !isVisible }" alt>
  <img src="https://image.flaticon.com/icons/png/512/24/24139.png" height="30px" class="icon-close"
    [ngClass]="{ 'block': isVisible,'none':!isVisible }" alt>
</div>

пожалуйста, проверьте полную демонстрацию здесь Демо

Answer 2

Здесь вы должны использовать угловую директиву * ngIf.

<div class="toggle" (click)="isVisible = !isVisible">
    <div class="icon">
      <img *ngIf="isVisible" src="https://image.flaticon.com/icons/png/512/64/64576.png" class="icon-open" alt>
      <img *ngIf="!isVisible" src="https://image.flaticon.com/icons/png/512/24/24139.png" class="icon-close" alt>
    </div> 
</div>

Answer 3

Я бы использовал класс переключения для переключения между 2 иконками.Я использую что-то вроде ниже:

$().ready(function(){
    $(".closeButton").click(function () {
        $(".searchContents").slideToggle('1000');
        $(this).find('i').toggleClass('fas fa-times fas fa-sort-down')
    });
});