dynamically adding # attribute in angular 6 element

Question

I have following code in one of my templates:

                 <ion-col text-center *ngFor="let shape of data.items[0].expandItems | slice:0:4; let i=index">
                  <a #btn{{shape.value}} class="item item-text-wrap notselected" (click)="toggleButtonShape(shape)">
                      <img src="{{shape.url}}">
                      <p>{{shape.title}}</p>
                  </a>
                 </ion-col>

And the code in my corresponding .ts file is:

toggleButtonShape(shape) {
shape.isChecked = !shape.isChecked;
if(shape.value === 'BR') {
  if (shape.isChecked === true) {
    this.removeClass('notselected', this.btnBR);
  } else {
    this.addClass('notselected', this.btnBR);
  } 
} }


addClass(className?: string, element?: any) {
    this.renderer.addClass(element.nativeElement, className);
}


removeClass(className?: string, element?: any) {
    this.renderer.removeClass(element.nativeElement, className);
}

The problem is, when either of the above mentioned functions are executed, the element parameter is undefined. I have declared all the @ViewChilds().