typescript - Angular 2 get all directives of the same type inside the directive class -

i'm trying achieve active state on 1 of directives, element has directive on gets active class whenever isactive set true in directive instance.

the issue can't seem pick more 1 directive @ given time, appears same element fetching other directives.

export class modalopendirective {   @contentchildren(modalopendirective) modalopendirectives: querylist<modalopendirective>;   @input() modalid: string;   @input() modaltemplate: string;    public modalopen: string;    constructor(private modalapi: modalapiservice) {}    @hostlistener('click')   open(): void {      this.modalapi.open(this.modalid, this.modaltemplate);      this.toggleactiveclass();   }    @hostbinding('class.active')   isactive: boolean;    toggleactiveclass(): void {      this.modalopendirectives.map((directive) => {       directive.isactive = false;     });      console.log(this.modalopendirectives);      this.isactive = true;   } } 

how can make sure picks other directives of same type? i'm pretty sure @contentchildren way go doesn't appear work.

edit: here's how use them:

<button modalopen modalid="test1">open modal nr 1</button> <button modalopen modalid="test2">open modal nr 2</button>    <button modalopen modalid="test3">open modal nr 3</button> 

so when modalopen modalid="test1" gets triggered, button should active class , other buttons should lose theirs.

modalopen contains single element, therefore contentchildren returns one.

if change

<div modalopen>   <button modalid="test1">open modal nr 1</button>   <button modalid="test2">open modal nr 2</button>      <button modalid="test3">open modal nr 3</button> </div> 

contentchildren return 3 elements.

this won't pass modalid modalopen though.