Angular-6.md

How to setup Angular 6 environment on windows

1.Download & Install Node JS on your PC 2.Install Angular CLI globally 3.Choose the best text editor for you

Reference link - https://peakup.org/blog/how-to-setup-angular-6-environment-on-windows/

Crete new project and generate component in angular6

ng new project_name
Open project in browser :
ng serve --open
Create ng component :
ng generate component sidebar
Steps:
1.change html in app.component.html
2.change html in sidebar.component.html
3. add css in style.scss
4.change scss in sidebar.component.scss
5. add routing in app-routing.modules.ts (imporing the class->import { UsersComponent } from './users/users.component';)
6.create services to fetch data from api (ng generate service data)
7. to use services we want http client(import htttpclient in data.service.ts)
8. User public api for demo https://jsonplaceholder.typicode.com/users
9. import the httmpclient module in app.module.ts
10. add the detaservice in users.component.ts and then consume the service in component.
11. to use the cotroler as path includes in component.ts file(import { ActivatedRoute } from '@angular/router';)

app.module.ts ->it has some libraries which are imported and also a declarative which is assigned the appcomponent.app component which is created by default will always remain the parent

how to Run angular code in xampp?

a>change the index.html <base href="/"> to <base href="./">
b> then run the command ->ng build --prod
c>then copy the dist folder in xampp/htdocs

Get all localstorage items

Object.keys(localStorage)

Difference between [],{{}}, () for binding state of property?

[] is for binding from a value in the parent component to an @Input() in the child component. It allows to pass objects.
{{}} is for binding strings in properties and HTML like.
() is for binding an event handler to be called when a DOM event is fired or an EventEmitter on the child component emits an event.

What is router-outlet ?

Router-outlet in Angular works as a placeholder which is used to load the different components dynamically based on the activated component or current route state. Navigation can be done using router-outlet directive and the activated component will take place inside the router-outlet to load its content.