Extend a components change detection in Angular2

Question

I have a List object, like this

class List {
    private urls: string[] = [];

    public getNames(): Observable<string[]> {
       // fetch all `this.urls` and extract the names
    }

    public addUrl(url: string) {
       this.urls.push(url);
    }

    public hash(): string {
       // generate a hash out of `this.urls`
    }
}

It basically has some urls, and can provide names found on these urls

Now i need a component that displays these names:

@Component({
    selector: 'lister',
    template: '<p *ngFor="let name of names|async">{{ name }}</p>'
})
class Lister implements OnChanges {

     @Input() list: List;

     private names: Observable<string[]>;

     ngOnChanges() {
         this.names = this.list.getNames();
     }
}

So far so good, it works if i use it like this

 <lister [list]="somelist"></lister>

but it doesnt refresh when somelist.addUrl(...) is called, due to the fact that it does not really change anything.

A workaround is to introduce something that changes, like this:

class Lister implements OnChanges {
    // ...
    @Input() hash: string;
}

and use the Lister accordingly:

 <lister [list]="somelist" [hash]="somelist.hash()"></lister>

but this seem to make it unneccessary complex for the caller.

I'd rather would somehome make the Lister itself "listen" to it's lists changes.

Is there a way to achieve this?

Answer 1

Ok, this is a clear case of RTFM: the answer is ngDoCheck, which is called every time the change detection is run.