Posts

Showing posts with the label angular8

Child to parent component communication in angular 8

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 to child component communication in angular 8

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 > ...

Could not find module “@angular-devkit/build-angular”

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

How to Add Bootstrap to an Angular CLI project

Image
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...