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
No comments:
Post a Comment