How to change attribute from false to true (or true to false) by click on Angular

Question

I want to change value of attribute in boolean way by clicking on the component anywhere.So when i click its changed to true, and when i click another time its false and like that ...

Answer 1

Solution 1

You can create a variable like public isLarge:boolean = false in the parent component, and do something like that :

<lib-obe-latest-invoice 
    [largeLatestView]="isLarge" 
    (click)="isLarge = !isLarge">
</lib-obe-latest-invoice>

This "click" ouput is native with Angular.

Solution 2

Another solution is to do the job only in the component. So you can remove your input, and just have :

<lib-obe-latest-invoice><lib-obe-latest-invoice>

And inside LibObeLatestInvoiceComponent, add decoratore instead of your @Input.

Change :

@Input() largeLatestView: boolean

To :

largeLatestView = false;

@HostListener('click')
onClick() {
    this.largeLatestView = !this.largeLatestView;
}

The result will be the same.