я не могу использовать NGIF на стрелку в угловых 6

Question

это мой html-файл:

<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>

это мой css-файл:

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

и это мой машинописный файл:

export class GeneralManagementComponent implements OnInit {

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

   ngOnInit() {
   }

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

Ичто я хочу делать Когда я нажимаю на ссылку, показываю стрелку , а когда я использую ngif , она не работает для стрелка .Но когда я использую ngif для другого div, его работа.Я не знаю, почему я не могу использовать ngif для стрелка .

я делаю здесь свою проблему https://stackblitz.com/edit/angular-slmxmk?file=src%2Fapp%2Fapp.component.html

я использую угловой 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>

ссылка: 1012 * блиц *