Display a component after a click($event) Angular 4
I think you should keep it simple with the use of *ngIf
and you can pass in the boolean value to the child component to hide only the part you want using the @Input
decorator
1.parent HTML
<div class="daydetail">
<h1>Detail of the day</h1>
<button type="button" label="Click" (click)="toggleChild()"></button>
<div>
<child-component [showMePartially]="showVar"></child-component>
</div>
</div>
2.parent component
export class AppliV2Component {
showVar: boolean = true;
toggleChild(){
this.showVar = !this.showVar;
}
}
export class ChildComponent {
@Input() showMePartially: boolean;
// don't forget to import Input from '@angular/core'
}
4.child HTML
<div>
<h1> this part is always visible</h1>
</div>
<div *ngIf="showMePartially">
<h1> this part will be toggled by the parent component button</h1>
</div>