angular 2 bind to component selector

Question

I have a component that I needs to be hidden when a property is true. Is there a way to solve this within the component itself.

Example:

@Component({
  selector: 'prio-tab',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template:
  `
      <div [hidden]="!active">
        stuff
      </div>
    `
})

export class PrioTabComponent {
  @Input() title;
  active:boolean = false;
}

Here I would like to have the actual "prio-tab" element to depend on active-flag. Not just the content inside prio-tab.

Or is it maybe possible to use itself when declaring the prio-tab tag, like this:

<prio-tab [hidden]="this.active">
     stuff
</prio-tab>

I guess a working solution would be to create a reference to the prio-tab component in its parent and then go through the parent. But how would I do if I have multiple prio-tab's ?

Günter Zöchbauer · Accepted Answer · 2016-12-09 11:24:04Z

1

You can use @HostBinding()

export class PrioTabComponent {
  @Input() title;

  @HostBinding('hidden')
  active:boolean = false;
}

answered Dec 9, 2016 at 11:24

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viktor Eriksson Over a year ago

That is bloody marvelous !

Collectives™ on Stack Overflow

angular 2 bind to component selector

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related