Posts

Showing posts from September, 2019

Event Binding and Event Filtering || Displaying Data and Handling Events

Image
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",$

Class and Style Binding || Displaying Data and Handling Events

Image
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; }

BootStrap in Angular || Displaying Data and Handling Events

Image
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

Property and Attribute Binding in Angular || Displaying Data and Handling Events

Image
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; }

Service in Angular || Dependency Injection || Angular Fundamentals

Image
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"];   } }