Angular 2 using BehaviorSubject in custom RadioButton -

i need build custom radiobuttons. when 1 selected, calls service send identifier subscribed radiobuttons including caller. if subscribe sees key (instance + id) not same itself, uncheck otherwise matching instance + id (who indeed caller) remain checked. service:

import { injectable } '@angular/core'; import { behaviorsubject} 'rxjs/behaviorsubject'; import {subject} 'rxjs/subject';  @injectable() export class radiobuttonservice {   public status_subject: subject<string> = new behaviorsubject<string>('x;y');   constructor() {   }   public setradiochecked(instance: string, id: string ) {     const key = instance + ';' + id;     this.status_subject.next(key);   } } 

relevant part of component:

export class radiobuttoncomponent implements afterviewinit, ondestroy {   @input() id: string;   @input() instanceid: string;   @input() group: string;   isdisabled = false;   ischecked = false;   subj: subject<string>;   constructor(private radsvc: radiobuttonservice) {     this.subj = this.radsvc.status_subject;   }    ngafterviewinit() {     this.subj.subscribe(       (key) => {         const parts = key.split(';');         this.ischecked =  (key[0] !== this.instanceid || key[1] !== this.id ? false : true );       }     );   }    clickevent($event) {     if (!this.isdisabled) {       this.ischecked = !this.ischecked;       this.radsvc.setradiochecked(this.instanceid, this.id); // tell world got clicked       // send store(instanceid, id, value);     }   } 

the afterviewinit() initializes component's subject (i think) , supposed wait service call. when click on radiobutton, clickevent called in component, stepped setradiochecked function in service, next(key) seems execute, never caught component's afterviewinit subscribe.

what missing?

thanks :-)

i created plunkr code , i'm able working fine: plnkr.co/edit/wzzvznu6s8upob85gqzo