title: How to let a component delete itself on a button click with in angular
body: <p>I can't make a component delete itself with angular. </p>
  
  <p>I am currently learning angular and started a small greeting project for the start. How the App should work:</p>
  
  <ol>
  <li>Type your name</li>
  <li>Child component is created that is greeting you. </li>
  <li>Child component contains button to delete itself</li>
  </ol>
  
  <p>Currently i fulfilled the first two steps and everything works fine. But i have no idea how i can make the child component delete itself. Coming from React i know, that there was the possibility to delete a "component" with the lifecycle methods somehow. Is there something similiar in angular? At the moment i can't find it, but i found the method "OnDestroy()" that is called, before a component is destroyed. But how do i destroy it properly? </p>
  
  <p>Parent:</p>
  
  <pre><code>import { Component, OnInit, ViewChild, Input } from '@angular/core';
  
  @Component({
    selector: 'app-greeter-service',
    templateUrl: './greeter-service.component.html'
  })
  export class GreeterServiceComponent implements OnInit {
    title = '';
    currentUser = '';
    isVisible = false;
  
    currentUsers: any[] = [];
  
    @ViewChild('newUser') inputField;
  
    constructor() {}
  
    greetingFunc(newUser : string) {
        if(newUser) {
        this.currentUsers.push(newUser);
        console.log(this.currentUsers);
        this.inputField.nativeElement.value='';
      }
    }
  
    ngOnInit() {
        this.title = 'Welcome to the Greeter!';
    }
  
  }
  </code></pre>
  
  <p>Child: </p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-was-greeted',
    templateUrl: './was-greeted.component.html',
    styleUrls: ['./was-greeted.component.scss']
  })
  
  export class WasGreetedComponent implements OnInit {
    @Input() user: string;
  
    constructor() { }
  
    deleteMe() {
      console.log("here should be the action");
    }
  
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>How i add a component to the app "dynamically":</p>
  
  <pre><code>&lt;div class="column" *ngFor="let user of currentUsers"&gt;
      &lt;app-was-greeted [user]="user"&gt;&lt;/app-was-greeted&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So for every "push" in the array "currentUsers" a component is created. </p>