app.component.html
---------------------------
<div>
To render the name variable we use this syntax <pre ngNonBindable>{{ name }}</pre>
</div>
<br>
<input type="text" [(ngModel)]='val'>
<some-element [ngPlural]="val">
<ng-template ngPluralCase="=1">Geek</ng-template>
<ng-template ngPluralCase="=2">Geeks</ng-template>
</some-element>
app.component.ts
-----------------------
val = 2;
people.json
---------------
[
{
"name": "Douglas Pace",
"age": 35,
"country": "UK"
},
{
"name": "Mcleod Mueller",
"age": 32,
"country": "USA"
},
{
"name": "Day Meyers",
"age": 21,
"country": "HK"
},
{
"name": "Aguirre Ellis",
"age": 34,
"country": "UK"
},
{
"name": "Cook Tyson",
"age": 32,
"country": "USA"
}
]
app.component.html
----------------------
<h4>NgClass</h4>
<ul *ngFor="let person of peopleList">
<li [ngClass]="{
'text-success':person.country === 'UK',
'text-primary':person.country === 'USA',
'text-danger':person.country === 'HK'
}">
{{ person.name }} ({{ person.country }})
</li>
</ul>
<h4>NgStyle</h4>
<ul *ngFor="let person of peopleList">
<li [ngStyle]="{'font-size.px':24}"
[style.color]="getColor(person.country)">
{{ person.name }} ({{ person.country }})
</li>
</ul>
app.component.ts
--------------------
import people from './_files/people.json';
public peopleList:{name:string, age:number, country:string}[] = people;
getColor(country: any) {
switch (country) {
case 'UK':
return 'green';
case 'USA':
return 'blue';
case 'HK':
return 'red';
}
return 'green';
}
app.component.css
-----------
.text-success{
color: green;
font-style: bold;
}
.text-primary{
color:blue ;
font-style: bold;
}
.text-danger{
color:red ;
font-style: bold;
}
PostedBy:pankaj_bhakre
countries.json
---------------------
[
{"name" : "India", "code" : "AF"},
{"name" : "Åland Islands", "code" : "AX"},
{"name" : "Albania", "code" : "AL"},
{"name" : "Algeria", "code" : "DZ"}
]
app.component.html
-----------------------
<li *ngFor="let country of countryList; index as i; first as isFirst">
{{country.name}} <span *ngIf="isFirst">default</span>
</li>
app.component.ts
---------------------------
import countries from './_files/countries.json';
public countryList:{name:string, code:string}[] = countries;
tsconfig.json
---------------------
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
rainbow.directive.ts
----------------------
import { Directive, HostBinding, HostListener } from '@angular/core';
@Directive({
selector: '[appRainbow]'
})
export class RainbowDirective {
constructor() { }
possibleColors = [
'darksalmon',
'hotpink',
'lightskyblue',
'goldenrod',
'peachpuff',
'mediumspringgreen',
'cornflowerblue',
'blanchedalmond',
'lightslategrey'
];
@HostBinding('style.color') color!: string;
@HostBinding('style.border-color') borderColor!: string;
@HostListener('keydown') newColor() {
const colorPick = Math.floor(Math.random() * this.possibleColors.length);
this.color = this.borderColor = this.possibleColors[colorPick];
}
}
app.module.ts
----------------
import { RainbowDirective } from './rainbow.directive';
@NgModule({
declarations: [
AppComponent,
RainbowDirective
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
-----------------------
<input type="text" appRainbow />
product.component.html
-----------------------
<p>product works!</p>
<h1>Product</h1>
<h2>Title: {{product.title}}</h2>
<h3>Price: {{product.price}}</h3>
<input type="text" [(ngModel)]='name'>
<h2> {{name}}</h2>
<button (click)="addProduct()" [style.height.px]='btnHeight' [style.width.px]='btnWidth'>Add Product</button>
product.component.ts
---------------------
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor(private cd: ChangeDetectorRef) { console.log(this.cd); }
// Interpolation
product = {
title: 'Computer Keyboard',
price: 500
};
// Propety Binding
btnHeight = 100;
btnWidth = 100;
// Two-way binding
name = `foo`;
ngOnInit(): void {
console.log('init life cycle hook');
}
// Event Binding
addProduct() {
console.log('add Product');
}
}
Child div inside Parent div
HTML & CSS code
Child div is having yellow color & Parent div is having red. Apply CSS in such a way that yellow div should be align exactly in the middle of red div.
Ans: .parent{
width:200px;
height:200px;
background-color:red;
display: flex;
justify-content: center;
position: relative;
}
.child{
width:100px;
height:100px;
background-color:yellow;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Posted By: pankaj_bhakre
Competencies:
-------------
How do we install Angular/Angular CLI locally?
How can we can create Angular application from scratch?
What is the use of the angular cli command "ng generate" command.
What are different possible usages of "ng generate"
1) npm install -g @angular/cli
update CLI commands
-----------------------
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli
2) Generate commands
https://angular.io/cli/generate
(A)
ng generate component <component-name>
ng g c <component-name>
(B)
ng generate module <module-name>
ng g m <module-name>
(C)
ng generate directive <directive-name>
ng g d <directive-name>
(D)
ng generate service <service-name>
ng g s <service-name>
(E)
ng new <app-name>
2) ng new myproject1
set PATH=%PATH%;C:\Users\P7166178\AppData\Roaming\npm
Day1\myproject>ng g c Product
3) Component Metadata
template/templateUrl
Providers
styles/StyleUrls
selector
encapsulation
changeDetection
animations
viewProviders
4) DataBinding
Interpolation
Property Binding
Event Binding
********************************************************************
Competencies:
-------------
What are Components?
What are Directive?
What are different way we can write Directives?
--> ng g c mydirective
5) Directives are classes that add additional behavior to elements in your Angular applications.
(A) Components—directives with a template:
- This type of directive is the most common directive type.
(B) Attribute directives:
- directives that change the appearance or behavior of an element, component, or another directive.
(C) Structural directives
- directives that change the DOM layout by adding and removing DOM elements.
Built-in attribute directives:
----------------------------------
Attribute directives listen to and modify the behavior of other HTML elements,
attributes, properties, and components.
Most common attribute directives are as follows:
--------------------------------------------------------
NgClass adds and removes a set of CSS classes.
NgStyle adds and removes a set of HTML styles.
NgModel adds two-way data binding to an HTML form element.
Using NgClass with an expression
---------------------------------
<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
Sample Example:
------------------
currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
// CSS styles: set per current state of component properties
this.currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
};
}
<div [ngStyle]="currentStyles">
This div is initially italic, normal weight, and extra large (24px).
</div>
Decorator:
-----------------------------
https://www.digitalocean.com/community/tutorials/angular-hostbinding-hostlistener
The HostBinding & HostListener are decorators in Angular.
HostListener listens to host events,
while HostBinding allows us to bind to a property of the host element.
The host is an element on which we attach our component or directive.
This feature allows us to manipulate the host styles or take some action
whenever the user performs some action on the host element.
Posted By:pankaj_bhakre
