Scribd
Upload
39 views

Angular Notes

This document provides an overview of key concepts in Angular including: 1. How to initialize an Angular CLI project, create components, and set the entry point. 2. Core directives like NgModule, NgIf, and NgFor that control layout and behavior. 3. Data binding techniques like property, event, and two-way binding to connect components. 4. How to share data between parent and child components using inputs, outputs, and view child. 5. Routing in Angular using the RouterModule and directives like routerLink.

Uploaded by

iyerarvind2022
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
39 views

Angular Notes

This document provides an overview of key concepts in Angular including: 1. How to initialize an Angular CLI project, create components, and set the entry point. 2. Core directives like NgModule, NgIf, and NgFor that control layout and behavior. 3. Data binding techniques like property, event, and two-way binding to connect components. 4. How to share data between parent and child components using inputs, outputs, and view child. 5. Routing in Angular using the RouterModule and directives like routerLink.

Uploaded by

iyerarvind2022
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

npm i -g @angular/cli - Install cli

ng new projectname - create new project


main.ts - Entry point for angular project
app-routing.module - file regarding for routing

app.module.ts ->

Declartions - put all the components inside it as it is a parent component

Decorator: to convert to angular component

@Component

selector - is to identify the component


templateUrl - to load html content on the browser or add a url of the html file
styleUrls: [] - to load the css or add the url of the css file

onInit - Lifecycle hook This runs after the component is mounte in the dom

data binding - {{}} - string interpolation add javascript code inside curly braces

Sharing data between components

1 - parent to Child component via @input Decorators


2 - Child to parent component via @output decorators
3 - Child to parent where there is Event, using a @Output decorator and Event
Emitter

Parent to child we pass the data through the selector and get the data from
@input() decorator through the attribute name

Child to parent - We use @ViewChild(ComponentName) and then use lifecycle method


ngAfterViewInit() - this lifecycle method runs after the entire view is initialized

class and style binding is used to dynamically add css to our html elements

[class.text-red] = "bool"

[style.backgroundColor] = "expression"

Event binding - (click) = "handleClick()"

Event filtering = (keyup.enter) = "handleEnter()" - Trigger only when enter key is


pressed

<input type="text" (keyup.enter) = "onKeyUp(username.value)" #username />


#username - is the template variable uniqu for that input and then we can pass the
value to the handler

<input type="text" [(ngModel)] = "username" (keyup.enter) = "onKeyUp()" />

ngModel - is used for two way data binding

angular directives is used for manuplating the dom elements, i.e attaching
behaviour to HTML dom, angular syntax which we write inside html

[(ngModel)] = "value"
[hidden]

there are four types of Directives

Component Directive - which is angular directive which has a template view


Structural directive - make changes in the layout of the DOM ie. add or remove
elements *ngIf(adding or removing element from DOM) or *ngFor(lists elements of
every iteration).
Attribute directive - behavior or element changes in the appearance and behavior
of an element. For example, ngStyle( applying styles) or ngClass(applying CSS
classes).

Custom Directive is very similar to creating the Angular component. The custom
directive is created using the @Directive decorator to replace the @component
decorator.

Structural Directive

<li *ngFor = "let post of postArray"> {{ post }}</li>

Angular pipes are used to transforming data into a particular format when we only
that data transformed in a template or in html view

Angular interface - it is used for type checking and we declare a blueprint wheer
all the variables are declared and its data types

ngForm is special directive whihc is used for forms

formControl() - has different types of validation methods, error

set the routes for our application

RouterModule.forRoot([
{path: 'posts', component: DemoListComponent}
])

routerLink for navigating to the components

<button [routerLink] = "['post','index']">View </button>

ActivatedRoute is used to get the routerparameter from the browser

this.route.paramMap.subscribe(value => {console.log(value)})

Observable is sequence of data which is emitted asynch or synch over a period of


time

Data binding
String interpolation- controller to view -> mix the data with html
Property binding[] - controller to view ->
Event binding - send an event from view to component
two way binding [(ngModel)] - data flows from view to controller and vice versa

If we want to do routing from html we use routerLink and if from component we use
router.navigate()

You might also like