How can I change projected content from child component using content projection

I want to create a reusable accordion component, So I created it and used it in parent component successfully. Contents opens and collapses upon click of header. Now I'm faced with situation where I want to toggle the up/down icons on header on collapsing/ opening the content. How can I access the projected content to achieve this.

Accordion Component

import { Component, Input, OnInit } from '@angular/core';
const DEFAULT_DURATION = 300;
@Component({
  selector: 'app-accordion',
  templateUrl: `
   <div (click)="collapsed = !collapsed">
    <ng-content select="[header]"></ng-content>
   </div>
   <div class="contentWrapper" [@collapse]="collapsed">
    <ng-content></ng-content>
   </div>`,
  animations: [
    trigger('collapse', [
      state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
      state('true', style({ height: '0', visibility: 'hidden' })),
      transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in')),
      transition('true => false', animate(DEFAULT_DURATION + 'ms ease-out'))
    ])
  ],
  styleUrls: ['./accordion.component.css']
})
export class AccordionComponent  {
  collapsed = false;
}

Parent Component template

<app-accordion>
    <div header>Click to toggle (icon)</div>
    <div> Content </div>
 </app-accordion>