How do I connect the button to change the values of the [codeOnly] values in the directives below it?
I'm using Angular 2.4.10 in typescript.
<button class="btn btn-primary">
Click me to change all of the [codeOnly] values below to true
</button>
<app-header [codeOnly]='false'></app-header>
<app-power-bi-wrapper [codeOnly]='false'></app-power-bi-wrapper>
<app-power-bi-wrapper-mobile [codeOnly]='false'></app-power-bi-wrapper-mobile>
<app-page-title [codeOnly]='false'></app-page-title>
<app-page-title-nav [codeOnly]='false'></app-page-title-nav>
In the component that contains your HTML add
isFoo:boolean = false;
then change the HTML to
<button class="btn btn-primary" (click)="isFoo = true" >
Click me to change all of the [codeOnly] values below to true
</button>
<app-header [codeOnly]='isFoo'></app-header>
<app-power-bi-wrapper [codeOnly]='isFoo'></app-power-bi-wrapper>
<app-power-bi-wrapper-mobile [codeOnly]='isFoo'></app-power-bi-wrapper-mobile>
<app-page-title [codeOnly]='isFoo'></app-page-title>
<app-page-title-nav [codeOnly]='isFoo'></app-page-title-nav>
or to toggle
<button class="btn btn-primary" (click)="isFoo = !isFoo" >
Click me to change all of the [codeOnly] values below to true
</button>