How to set @HostBinding for conditions in angular component

Question

I want to set @HostBinding for specific conditions only. Suppose that I declared the @HostBinding like below in angular component

@Input() @HostBinding('innerHTML') mainvalue;

if the mainvalue is empty or undefined, then how can we stop working hostbinding?. currently if mainvalue is empty or undefined, then whole content of the component is going to deleted.

Thanks in advance.

Check this link: https://stackoverflow.com/questions/44923564/conditional-hostbinding-depending-on-input — Hardik Solanki, Jan 23 '23 at 05:46

score 3 · Answer 1 · answered Jan 23 '23 at 07:04

Use a setter on your input to conditionally set or keep your innerHTML host binding:

@Component({
  selector: 'app-test',
  template: '',
})
export class TestComponent {

  @Input() set mainValue (value: any) {
    if (value) {
      this.innerHTML = JSON.stringify(value, null, 2);
    }
    // otherwise keep the current innerHTML
  }

  @HostBinding('innerHTML') innerHTML;
}

score 0 · Answer 2 · answered Jan 23 '23 at 05:42

0

ngIf directive to conditionally apply the host binding only when the mainvalue is defined and not empty. <ng-container *ngIf="mainvalue"> @Input() @HostBinding('innerHTML') mainvalue; enter code here

answered Jan 23 '23 at 05:42

vishnu C

19
2

How to set @HostBinding for conditions in angular component

2 Answers2