title: i cant use ngif on arrow in angular 6
body: <p>this is my html file : </p>
  
  <pre><code>&lt;div class="site"&gt;&lt;a routerLink="site" (click)="myMove()"  class="text"&gt;
    &lt;mat-icon svgIcon="site" class="icon"&gt;&lt;span  class="fa fa-caret-right caret1"  *ngIf="text2"&gt;&lt;/span&gt;
      &lt;div *ngIf="text" class="text1"&gt;Site&lt;/div&gt;
    &lt;/mat-icon&gt;
  &lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>this is my css file : </p>
  
  <pre><code>.text {
    margin: 0px 0px 0px 40px;
  }
  .caret1 {
    margin-left: 30px;
    position: absolute;
  }
  </code></pre>
  
  <p>and this is my typescript file :</p>
  
  <pre><code>export class GeneralManagementComponent implements OnInit {
  
    text = true;
    text2 = false;
     constructor() {
     }
  
     ngOnInit() {
     }
  
    public myMove() {
    this.text2 = true;
    this.text = false;
    }
   }
  </code></pre>
  
  <p>And what I want to do When I click on the link, show the <strong>arrow</strong>, and when I use <strong>ngif</strong> it does not work for <strong>arrow</strong>. But when I use <strong>ngif</strong> for another div,its work.
  I do not know why I can not use <strong>ngif</strong> for <strong>arrow</strong>.</p>
  
  <p>i make my problem here <a href="https://stackblitz.com/edit/angular-slmxmk?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-slmxmk?file=src%2Fapp%2Fapp.component.html</a></p>
  
  <p>i useing angular 6.</p>