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()
