Please enable JavaScript.

Coggle requires JavaScript to display documents.

Continue Angular (As the String Interpolation is clear, move on to (Event…

- - - - The second prioritize will be the Constructor, the button will be enable after the time given
        
        Code in servers.component.html: <button class ="btn btn-primary" [disabled]="!allowNewServer>" Add Server </button
        
        This indicate that property binding is take place.
        Means, after a condition of time, the button will have changes occur on the DOM
        
        Code in servers.component.ts:
        allowNewServer = false;
        constructor(){
        setTimeout(
        ()=>{ this.allowNewServer = true;
        }, 2000);
        }
- - - - The click is co-exist
      - "onClickServer" is created by the user
        
        Example code for onClickServer:
        onClickServer(){
        this.serverCreationStatus = 'Server was created!'
        }
- - - - Example Event Binding code:
        In servers.component.html: <input type="text" class ="form-control" (input)="onUpdateServerName($event)">
        In servers.component.ts:
        serverName="";
        onUpdateServerName(event: Event){
        this.serverName =(<HTMLInputElement>event.target).value;
        }
      - Example Two-Way Binding code:
        In server.component.html:<input type="text" class ="form-control" [(NgModel)]="serverName">
        However, it also will be affected by the Event Binding too.
        
        As the Two-Way Binding input textbox update,
        it will not affect the (input) as the serverName as variable
        
        The Two-Way Binding which is using NgModel as directive. It will be affected by the form input backend.
        
        Because it result both ways
      - While the Event Binding is not like Property Binding or String Interpolation. The great things about Event Binding is where it update the variable.
        
        And it will update the Two-Way Binding too as the variable has been update at the backend.