Angular 2 hide parent element on click on close button
<p>I am new in Angular2, I want to hide parent element after clicking on the close icon. Below is my code:</p>

<pre><code>@Component({
    selector: 'add-search',
    template: `
      &lt;input type='text' #newHero
        (keyup.enter)="addHero(newHero.value)"
        (blur)="addHero(newHero.value); newHero.value='' "&gt;
      &lt;button (click)=addHero(newHero.value)&gt;Add&lt;/button&gt;
    &lt;div&gt;
    &lt;div [hidden]="hideElement" style="margin-right:2px" *ngFor="let hero of heroes" class="label label-primary"&gt;{{hero}}&lt;span (click)="toggleElement()" style='cursor:pointer; display:inline-block; padding:1px 2px;'&gt;&lt;i class="fa fa-times" aria-hidden="true" style="font-size:10px;"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
   `
})
export class AddSearchComponent {
    heroes = Array&lt;string&gt;();
    addHero(newHero: string) {
        if (newHero) {
            this.heroes.push(newHero);
        }
    }
    private hideElement: boolean = false;
    toggleElement() {
        if (this.hideElement) {
            this.hideElement = false;
        else
            this.hideElement = true;
    }
}
}
</code></pre>

<p>Hide is not working in code. Can we do it in a simple way? or what will be the best approach?</p>