Web Guru

In this video,I explained  event binding and event filtering in Angular. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos . Visit my  Facebook Page  and  Instagram Page #eventbinding #eventfiltering #angular #webguru #angularcoders #angularprogrammers. The code is as follows - data.component.ts -  import { Component } from '@angular/core'; @Component ({   selector: 'data',   template: `              <h5> Event Binding </h5>              <button class="btn btn-primary" (click)="BtnClick($event)"> Click Me </button>              <br/> <br/>              <h5> Event Filtering </h5>              <input type="text" (keyup.enter)="KeyUp()"/>             ` }) export class DataComponent {      BtnClick($event){        console.log("Just Now I clicked the button",$

In this video,I explained  class and style binding in Angular. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos . The code is as follows - data.component.ts - import { Component } from '@angular/core'; @Component ({   selector: 'data',   template: `              <h5> Class Binding </h5>              <button class="btn btn-primary" [class.active] = "presentStatus"> Class Binding </button>              <br/> <br/>              <h4> Style Binding </h4>              <button [style.backgroundColor]="Status ? 'green' : 'red'"> Style Binding </button>             ` }) export class DataComponent {       presentStatus = true;       Status = false; }

In this video,I explained how to add  bootstrap in Angular. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos .  The code is as follows - bootstrap.component.ts -  import { Component } from '@angular/core'; @Component ({   selector: 'boot',   template: `              <h4> BootStrap Buttons </h4>              <button class="btn btn-primary"> Submit </button>              <br/> <br/>              <table class= "table table-bordered">                  <tr>  <th> Name </th> <th> Contact Number </th> </tr>                  <tr> <td> Rahul </td> <td> 84746377827 </td> </tr>                  <tr> <td> Mr. Rahul </td> <td> 8474637 </td> </tr>              </table>             ` }) export clas

In this video,I explained  property and attribute binding in Angular. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos . The code is as follows - data.component.ts - import { Component } from '@angular/core'; @Component ({   selector: 'data',   template: `              <h4> Property Binding </h4>              <img src= " {{ ImgLink }}" /> <br/> <br/>              <h4> Attribute Binding </h4>              <table [attr.border]="BorDer">                <tr> <td [attr.colspan]="ColSpan"> Hello </td>                     <td> Hi </td>                </tr>              </table>             ` }) export class DataComponent {     ImgLink = "assets/img/angular.png";     ColSpan = 2;     BorDer = 14; }

In this video,I explained  service in Angular. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos . The code is as follows - courses.component.ts -  import { CoursesService } from './courses.service'; import { Component } from '@angular/core'; @Component ({   selector: 'courses',   template: `              <ul start=5>                <li *ngFor= "let course of courses">                {{ course }}                </li>              </ul>   ` }) export class CoursesComponent {     courses;     constructor(service: CoursesService) {  //dependency injection       this.courses = service.getCourses();     } } courses.service.ts -  export class CoursesService {   getCourses() {     return ["HTML", "CSS","JS","PHP","AJS"];   } }

In this video,I explained  directive in Angular. Feel free to comment and like the video. For more, please subscribe and press the BELL icon. Please visit my  Angular Playlist . Please visit my  YouTube Videos .   #directive #ngFor #angular The code is as follows - ts file -  import { Component } from '@angular/core'; @Component ({   selector: 'courses',   template: `              <ul start=5>                <li *ngFor= "let course of courses">                {{ course }}                </li>              </ul>   ` }) export class CoursesComponent {   courses = ["HTML", "CSS","JS","PHP","AJS"]; }