title: Clicking on Child components without firing clicked event on parent component
body: <p>I have an angular based appication (currently v4.4). I have a view where a component displays an instance of itself for a finite number of times and then in the lowest "child" component, there is an svg. </p>
  
  <p>I want to be able to pickup the lowest component that has been clicked using the <code>(click)</code> event. I thought that I might be able to setup the z-index to link to the iteration number so that each subsequent child component appears on top of it's parent, so when anywhere in that area is clicked, the correct event is fired. </p>
  
  <p>I have made this <a href="http://plnkr.co/edit/aUxEKKvcFCHwQcD327SC?p=preview" rel="nofollow noreferrer">demo</a> on plunkr. You will see that clicking on the svg does not fire the clicked event, but clicking on any other area inside the boxes, causes the clicked event for that box and all it's parents. </p>
  
  <p>I would like to be able to toggle all boxes abckground colors independantly. </p>
  
  <p>Here are the components I have:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;my-child [iteration]="0"&gt;&lt;/my-child&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
    }
  }
  
  @Component({
    selector: 'my-child',
    template: `
      &lt;div class="border" [style.background]="toggle ? 'green' : 'pink'" (click)="clicked()"&gt;
      {{iteration}}
        &lt;my-child [iteration]="iteration" *ngIf="iteration &lt; 3"&gt;&lt;/my-child&gt;
        &lt;object *ngIf="iteration == 3" 
        id="img" width="300" height="300"
        data="http://snapsvg.io/assets/images/logo.svg"&gt;&lt;/object&gt;
      &lt;/div&gt;
    `,
  })
  export class Child {
    name:string;
    @Input() iteration;
    toggle: boolean;
    constructor() {
      this.name = `Angular! v${VERSION.full}`
      this.toggle = false;
    }
    ngOnInit() {
      ++this.iteration;
    }
    clicked(){
      this.toggle = !this.toggle;
      console.log(this.iteration)
    }
  }
  </code></pre>
  
  <h1>UPDATE:</h1>
  
  <p>The current answers answer the first part of this question, but don't deal with the svg click not firing the click event for the component that displays the svg.</p>