<h2 >Outer template syntax starts here </h2>
<h1 (click)="headerClicked()">Template syntax fun <span *ngIf="displayTextAfterHeaderClicked">(was clicked)</span></h1>
<button [disabled]="displayTextAfterHeaderClicked">Click on header to disable</button>

<img [src]="heroImage">

<button (click)="changeColorButtonClicked()" class="red" [class.red]="colorIsRed">Click to make red</button>
<br>
<br>
<br>

sizeFromInnerTemplate: <span>{{size}}</span>
<app-inner-template-syntax [size]=size (sizeEvent)="size=$event"></app-inner-template-syntax>



<h2 >Outer template syntax ends here </h2>





<h2 >Outer template syntax starts here </h2>
<h1 (click)="headerClicked()">Template syntax fun <span *ngIf="displayTextAfterHeaderClicked">(was clicked)</span></h1>
<button [disabled]="displayTextAfterHeaderClicked">Click on header to disable</button>

<img [src]="heroImage">

<button (click)="changeColorButtonClicked()" class="red" [class.red]="colorIsRed">Click to make red</button>
<br>
<br>
<br>

size from inner template in outer template: <span>{{size}}</span>
<app-inner-template-syntax [size]=size (sizeEvent)="size=$event"></app-inner-template-syntax>



<h2 >Outer template syntax ends here </h2>





Change size name to more suitable one
Change size name to more suitable one
