i cant use ngif on arrow in angular 6

Question

this is my html file :

<div class="site"><a routerLink="site" (click)="myMove()"  class="text">
  <mat-icon svgIcon="site" class="icon"><span  class="fa fa-caret-right caret1"  *ngIf="text2"></span>
    <div *ngIf="text" class="text1">Site</div>
  </mat-icon>
</a></div>

this is my css file :

.text {
  margin: 0px 0px 0px 40px;
}
.caret1 {
  margin-left: 30px;
  position: absolute;
}

and this is my typescript file :

export class GeneralManagementComponent implements OnInit {

  text = true;
  text2 = false;
   constructor() {
   }

   ngOnInit() {
   }

  public myMove() {
  this.text2 = true;
  this.text = false;
  }
 }

And what I want to do When I click on the link, show the arrow, and when I use ngif it does not work for arrow. But when I use ngif for another div,its work. I do not know why I can not use ngif for arrow.

i make my problem here https://stackblitz.com/edit/angular-slmxmk?file=src%2Fapp%2Fapp.component.html

i useing angular 6.

Answer 1

component.ts:

import { Component } from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  text = true;
  constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
  ){
        this.matIconRegistry.addSvgIcon(
      'site',
      this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/web.svg')
    );  
  }
    public myMove() {
    this.text = !this.text;
  }
}

html

<a (click)="myMove()" class="text">
  <mat-icon *ngIf="!text" svgIcon="site" class="icon">
    <span  class="divstyle1" >&#x27A4;</span>
    </mat-icon>
    <mat-icon *ngIf="text" svgIcon="site" class="icon">
    <div  class="text1">Site</div>
  </mat-icon>
</a>

link: blitz