Angular. Кнопка в родительском элементе должна перенаправить на страницу с одним из шаблонов дочернего

В родительском элементе есть массив объектов:

    <div *ngFor="let sticker of stickers"
routerLink="sticker-details/{{sticker.id}}">
    <h3>{{sticker.title}}</h3>
    <p>{{sticker.content}}</p>
    </div>

И здесь же кнопка:

<button (click)="add(sticker)">
</button>

При нажатии просто добавляет пустой объект к остальным. И уже при нажатии на объект открывается шаблон для прочтения, который можно редактировать (нажав на другую кнопку edit).

Шаблон дочернего компонента:

<div *ngIf="readTemp">
<button (click)="edit()"></button>
<button (click)="delete()"></button>
...
</div>
<div *ngIf="!readTemp">
<button (click)="cancel()"></button>
<button (click)="save()"></button>
...
</div>

Метод в родительском компоненте:

          add(sticker: Sticker): void {
            this.stickService.addSticker({sticker} as Sticker)
              .subscribe(sticker => {
                this.stickers.push(sticker);
    }
}

Как сделать чтобы при нажатии на кнопку add() открывался пустой шаблон для редактирования, и так же добавлялся новый объект в массив?
Пробовал через роутинг, не работает.