Question

17

How to change boolean value on click in angular 2 component

rated 0 times [ 21] [ 4] / answers: 1 / hits: 54526 / 7 Years ago, thu, march 23, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rayvenc

Add To Favorites

Follow

Total Points: 666

Total Questions: 125

Total Answers: 99

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 7 Years ago maximusbradforde · Accepted Answer

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>