Angular2 detecting change in transclusion

Question

I'm working in a new component to implement Dot navigation.

The parent container is a Component called DotNavigationComponent and each page is DotNavigationPage. Page selector is created in DotNavigationComponent I want to change page clicking on dots. I'm trying to do this using transclusion.

import {Component,
        EventEmitter,
        ContentChildren,
        OnInit,
        AfterContentInit,
        Optional,
        Host,
        Input,
        QueryList,
        Injectable } from '@angular/core';

@Component({
    selector: 'dot-navigation-page',
    template: `
        <ng-content *ngIf="showing"></ng-content>
    `,
})
export class DotNavigationPage implements AfterContentInit {
    @Input("page") page:number;
    public changePage:EventEmitter<any> = new EventEmitter();


    public showing:boolean = false;
    constructor() {}

    ngAfterContentInit() {
        if(this.page == 0){
            this.showing = true;
        }
        this.changePage.subscribe((index)=>{
            this.showing = false;
            if(this.page == index){
                this.showing = true;
            }
        })
    }
}

@Component({
    selector: 'dot-navigation',
    template: `
        <div class="dot-navigation">
            <ng-content></ng-content>
        </div>
        <div class="dot-navigation-scroll">
            <span (click)="nextPage(page)" *ngFor="let page of numPages">o</span>
        </div>
        `,
    styles: [`
        .dot-navigation-scroll{
            display: flex;
            justify-content: center;
        }
    `]
})
export class DotNavigationComponent implements AfterContentInit {
    public numPages:number[] = [];
    @ContentChildren(DotNavigationPage) pages:QueryList<DotNavigationPage> ;

    constructor(){}

    ngAfterContentInit(){
        for(let i = 0; i < this.pages.length; i++){
            this.numPages.push(i);
        }
        this.pages.forEach(page => {
            page.changePage.subscribe(()=>{console.log("test")})
        })
    }

    nextPage(index:number){
        console.log(index);
        this.pages.forEach(p=>{
            p.changePage.emit(index);
        })
    }
}

@Injectable()
export class DotService{
    changePage:EventEmitter<number> = new EventEmitter<number>();
}

The problem is that PageComponents are not changing when I change page. I have try to modify directly PageComponents attributes.

Any idea? Thanks!