Easiest way to use bootstrap in Angular


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

bootstrap

To enable bootstrap for the angular project there are multiple ways. You can manually include the library by downloading it from the getBootstrap.com. I prefer the npm way as most developers does

  1. Install the bootstrap from npm repo
  2. import them in styles.css

Install bootstrap

npm install --save bootstrap

Styles.css

Styles.css can be found at the root of your src folder of the project. Import the bootstrap main.css enable it for all the component for your project.

@import "~bootstrap/dist/css/bootstrap.min.css";

You can import as many styles you need to include.

Keep reading Angular posts

How to display list of data in Angular component template


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

List of data

As in other languages a list of data can be stored using a list/array in Angular. So how do we display it in HTML ? Like we do in other JS framework Angular also do, but using ngfor.

In our example we had a list of data as follows

 this.list= ['DELL', 'HP', 'LENOVO', 'ACER'];

In the HTML template we can render it using *ngFor

<p *ngFor= "let brand of list">
    <button>{{brand}}</button>
</p>

Keep reading Angular posts

Conditionally place component in Angular


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster.

conditional place component

In Angular we can place components conditionally, this can be done by

  • Create a property
  • use ngIf

First up all create simple property for enabling and disabling. It can be true or false property.

 enableFeature=flase

Now you can place ngif with in the any tag/component. In our case it is just a h1 tag.

<h1 *ngIf="enableFeature">{{'You slected ' + brandSelected}} </h1> 
What does this means ?

The heading will only show up if the enableFeature is set to true

Keep reading Angular posts

Component interaction in Angularjs – Part I


In Reactjs we used props to pass values to pass data to components , mean time Angularjs has different method for sharing data among components.

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

In this post we will discuss parent to child interaction.

Angular component and any custom component can pass property to another component. It didn’t send data directly, instead the data is stored in the parent class.

In our example we had a list component which is used to display a set of watch brands. The data is stored in the root component class.

The Project Structure

Angular Project Structure
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'BrnadComponent';
  blockTitle = 'Brands';
  blockData = ['ROLEX', 'SEIKO', 'FOSSIL', 'HUWAEI'];
}
//Template
<div>
  <H2>Property Binding Example</H2>
  <app-list [title]="blockTitle" [list]="blockData" ></app-list>
 
</div>

Receiving the data

We can get the data from the parent component ( app.component) using input (@Input) decorator function.

  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
    @Input() public title:any;
    @Input('list') public brands:any;
  
  constructor() { 
 
  }

  ngOnInit(): void {
  }

Note that The data shared by the parent component ( blockData) is accepted as brands not blockData. We used an alias instead the property, this will help us to solve conflict among property and shared properties.

You can use the function with or without aiias

Keep reading Angular posts

Angularjs component styling Part III : using ngClass


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • Npm
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Binding style class

You have been noticed that every Angularjs component has a component.css. This is where place all your SASS/CSS styling classes and ids. We can also use the inline style in your component.ts file, if you prefer ( as an array).

ngClass allow us to define and apply set of Styles and properties to a component.

Define Object and property

In class definition declare property with class.

public isClicked = true;
  public btnSpecial = {
    "btn": !this.isClicked,
    "btn-clicked": this.isClicked,
    "btn- special":  this.isClicked

  };

Define CSS

In your app component.css file define a simple button class

 
.btn{
    background-color:rgba(51, 134, 243, 0.986);
    margin: 5px;
    padding: 4px;
    color: white;
    border: 1px;
    border-radius: 2px;
  
}
.btn-clicked {
  background-color: rgba(243, 153, 51, 0.986);  
  border-color: rgb(255, 0, 0);

}
.btn-special{
   border-style: double;
   border-block-start-color: aquamarine;
}

Bind

It is possible bind the style object we created to accommodate multiple style, using the ngClass as follows

<button [ngClass]="btnSpecial">OK</button>

Class binding has higher precedence in Angular, that means when we use the both methods only the binding will work. So both can’t be used.

I know the above example is minimal , you can experiment much more , first I suggest have a clear understanding about CSS. A project based tutorial may help you[You Tube/Udemy].

Keep reading Angular posts

Angularjs component styling Part III : conditionally bind class


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • Npm
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Angularjs component styling Part II : binding class


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NPM
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Angularjs component styling Part I


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NPM
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Project Structure : Angularjs


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NMP
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

Get start with Angularjs


Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NMP
  • Nodejs
  • VSCODE
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

Angular CLI

Angular has its own way to dealing Project and components. So install the CLI first

npm install -g @angular/cli

This will install angular CLI on your system and ready for create your first project.

New Project

To create a new project in Angular us the ng new command.

ng new <project-name>

To run the project use either npm start or ng serve –open

New Component

To generate a component structure , we can use the CLI command ng g c <component-name>.

Keep reading Angular posts