CodeKhel

Parent component to child component interaction Child1 Component child1.component.ts => import  {  Component ,  OnInit ,  Output ,   EventEmitter  }  from   '@angular/core' ; @ Component ({   selector:  'app-child1' ,   templateUrl:  './child1.component.html' ,   styleUrls: [ './child1.component.css' ] }) export   class   Child1Component   implements  OnInit {   @ Output ()  public  childUsername  =   new   EventEmitter ();    fireEvent (){      this . childUsername . emit ( 'Hey! This is the Child component' );   }    constructor () { }    ngOnInit () {   } } child1.component.html => < div   class = "text-danger bg-success text-right mt-2 mb-2" ...

Parent component to child component interaction Parent Component parent.component.ts => import  {  Component ,  OnInit  }  from   '@angular/core' ; @ Component ({   selector:  'app-parent' ,   templateUrl:  './parent.component.html' ,   styleUrls: [ './parent.component.css' ] }) export   class   ParentComponent   implements  OnInit {  username :any   =   'this is the parent child' ;    constructor () { }    ngOnInit () {   } } parent.component.html => < div   class = "text-center  bg-primary text-white p-1 m-2" >    < H3 > PARENT TO CHILD COMPONENT COMMUNICATION  </ H3 >    < app-child   [uname] = 'username' >   </ app-child > </ div > ...

Custom Age Pipe with source code implemetation==>   Create age pipe in pipes fder by following command in command terminal ng g p pipes/age age.component.ts => DateOfBirth =   new   Date ( '01/07/1990'  ); age.pipe.ts => import  {  Pipe ,  PipeTransform  }  from   '@angular/core' ; @ Pipe ({   name:  'age' }) export   class   AgePipe   implements  PipeTransform {    transform (value :   any ) :   any  {      console . log ( "print age pipe = "   +   value );      let   currentDate :any   =   new   Date (). getFullYear ();  // 2019      let   birthYear :any   =   new   Date ( value ). getFullYear ();      let   ageofMan :any   =    currentDate   - ...

Steps to delete a component in Angular Remove the import line reference from Angular  app.module.ts  file. Remove the component declaration from @NgModule declaration array in  app.module.ts  file And then manually delete the component folder from Angular project. Finally Delete all the references of component manually from the Angular project. In Angular CLI,there is no command available to delete a component created by Angular CLI as of now. There is no ng delete component command as part of Angular CLI.

=========================================== You may try this one also==> npm install ng update and finally npm update

Although the setup seems simple, I still get a lot of questions on how to setup an Angular project generated with Angular CLI with Bootstrap. So let’s see the step by step in the sections below. 1: Creating an Angular project with Angular CLI The first step is creating your Angular project using  Angular CLI . For this example we will use the following command: ng new angular-bootstrap-example 2: Installing Bootstrap from NPM Next, we need to install Bootstrap. Change the directory to the project we created ( cd angular-bootstrap-example ) and execute the following command: For Bootstrap 3: npm install bootstrap@3.3.7 For Bootstrap 4: npm install bootstrap 2.1: Alternative: Local Bootstrap CSS As an alternative, you can also download the Bootstrap CSS and add it locally to your project. I donwloaded Bootstrap  from the website  and created a folder  styles  (same level as  styles.css ):  Don’t place your local CS...