У меня возникла проблема с тем, что не могу сделать всплывающую форму.
У меня есть два компонента. Первый HEADERCOMPONENT, второй POPUPCOMPONENT.
В HEADERCOMPONENT у меня есть кнопка, которая изменяет состояние toggle c true на false:
HEADER.COMPONENT
@Component({
selector: 'app-header',
template: `<header class="header">
<h1 class="title">
Задачи
</h1>
<button class="material-icons">add
</button>
<button mat-raised-button (click)="popupToggle()">Отмена</button>
<app-popup [toggle]="toggle" *ngIf="toggle"></app-popup>
</header>`,
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
public toggle = false;
ngOnInit(): void {
}
public popupToggle() {
this.toggle = !this.toggle;
console.log(this.toggle);
}
}
В другом компоненте у меня есть кнопка отмена
, которая должна изменить состояние тем самым закрыть форму.
Подскажите ,пожалуйста, как это сделать.
POPUP.COMPONENT
@Component({
selector: 'app-popup',
template: `<div class="popup">
<button mat-raised-button (click)="popupToggle()" >Отмена</button>
</div>`,
styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
@Input() toggle = false;
ngOnInit(): void {
}
public popupToggle() {
this.toggle = !this.toggle;
console.log(this.toggle);
}
}