Scribd
Upload
18 views

Angular

This document provides code snippets and notes on various Angular topics: - It includes commands for generating components, installing packages, and managing Git branches. - It covers core Angular concepts like data binding, directives, pipes, lifecycles, and dependency injection. - It also discusses state management with NgRx, routing, HTTP requests, forms, and internationalization. - Other topics include RxJS, observables, guards, JSON server, error handling, and production builds.

Uploaded by

Abdalrahman .E Mahfouz
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views

Angular

This document provides code snippets and notes on various Angular topics: - It includes commands for generating components, installing packages, and managing Git branches. - It covers core Angular concepts like data binding, directives, pipes, lifecycles, and dependency injection. - It also discusses state management with NgRx, routing, HTTP requests, forms, and internationalization. - Other topics include RxJS, observables, guards, JSON server, error handling, and production builds.

Uploaded by

Abdalrahman .E Mahfouz
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

primeNG

Apexcharts
ECharts

[email protected]

512233344
P@ssw0rd

//standalone component
ng g c --standalone investment-details --skip-import

//if there are new files >>> (git add .) then ( git stash )

//un used imports


Shift + Alt + o

## [01.01.25.04]- 2024-1-10
## [01.01.numberofSprint.NumberofBuild] - history.
### Fixed

**Invest Via Bank Transfer & Authorized Investor**


-#numberofIssues:web

to pushing to ur brach
>> git add .
>> git commit -m "UR commit "
>> git push

//to move from branch to another


git checkout branch name

//to git all branchs


>>git fetch
>>git branch

//for run jest testing


npm run test

Rxjs gives you Observables.


Ngrx gives you state management with actions and reducers.

//To install @ngx-translate


npm install @ngx-translate/core @ngx-translate/http-loader --save

#when Production replace at app.routing


@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
with

@NgModule({
imports: [RouterModule.forRoot(routes , {useHash: true})],
exports: [RouterModule]
})

*************************************************************

//To install node modules


npm install

//To chosee classes name work_With_Team


BEM

//toastr is called snackbar at angular Material

subscribe in Angular means follow every thing at this thing.

//Design Patters for Angular


1 Singlton=>like in Service in @Injectable({ providedIn: 'root'})
2 Factory Method
3 Decortor
4 Observer
5 Dependency injection

// The Important Points in Angular

1 - Data binding >>>> {{data}} var ... attribuite binding [src] ...
(eventbinding) function in ts ...

>>>> Style binding >>>>>> <td [class.bg-danger] = " user.gender =='male'


">{{user.gender}} </td>
>>>> Class binding >>>>>> <td [style.color] = " user.salary>= 3000 'red':'green'
">{{user.salary}} </td>

2 - Directives =>like *ngFor *ngIf

and like this


>>>>>>>>>>>>>> <h2 [ngClass] = "{'bg-danger text-white':salary >= 4000}"> lorenn
</h2>
>>>>>>>>>>>>>> <h2 [ngStyle] = "{'color':salary >= 4000?'red':'blue'}"> lorenn
</h2>

3 - Pipes => currency of country and Date

4 - Component Life cycle =>like ngOnChange , ngOninit , ngOnDestroy

5 - Component Interaction=> like @Input() , @Output()

child to parent >>>>>>>>> use @Input

6 - @Viewchild => to go to input in html component from tscomponent


7 - Dependency injection use it to inject the service in any component through
constractor

8 - Routing - ActivateRoute service

9 - Observables - RxJS (ReactiveX => it's implementation of observables like RxJS)

10- Observables operators - Supjects

11- Guards

12- JSON server - HttpClient - GET - POST

13- Handling Errors - HttpClient - Generic Service - Interceptors

14- Forms [ Template - Driven Forms /// Reactives Forms (Dynamic) ]

15- Validation and Dynamic validation .

16- Reactive forms - Custom validator - Cross-field validator.

17- Lazy loading modules.

18- localization - Angular universal.

Single Page Application ( SPA )


// ctrl+ p => for searching on the top bar

//to download CLI


npm install -g @angular/cli

//-g => global


//after installing cli we can use ng for helping us

//create new angular App


ng new app1

//run the angular app on server


ng serve --open
or
ng s --o

//create component folder


ng g c UrComponentFolder
//g=> generate

// create component without testing file


ng g c UrComponentFolder --skip-tests

//install typescript
npm i -g typescript

//create js file from ts file and watch it


tsc index.ts --watch
//to open project in vs
code .

// for install bootstrap


npm i bootstrap

//and connect the bootstrap file in angular.json in build in (styles and in


scrpits)
(bootstrap.min.css) &
(bootstrap.bundle.min.js)

//for install free fontawesome


npm i @fortawesome/fontawesome-free

"styles": "node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",

"scripts": "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"

//For fortawsome we use its file in css only (all.min.css)


***Important note***
any changes in angular.json the server should stop then open a gain

"styles": [ "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ],

//Routing => go to app-routing.modules.ts and add Routes = [


{ path:'' , component: HomeComponent },
];

//then go to app.component.html and add this between navbar and Footer


<router-outlet></router-outlet>

//then go to links word and replace href with routerLink


routerLink = "home"

//to make router link active


using routerLinkActive in a ancar tag

//to make a service


ng g s nameOfit

//Api Movies
https://api.themoviedb.org/3/trending/all/day?
api_key=0c000d6b099081fa5395d9ad879777a0

//userId salah
63298953-8c83-4b5c-b3d7-3e187f959d87

//free server api json-server and install it global


npm i -g json-server

//to run the json server file


json-server --watch db.json
//toastr for notification
npm install ngx-toastr --save

//Create module with routing


ng g m its_name --routing

//Lazyloding == is feature for get api but when you need it

//For Production its make dist


ng build --configuration=production

//then update this line in app module with {useHash: true,}


imports: [RouterModule.forRoot(routes,{useHash: true,})],

//jwt to decode token


npm i jwt-decode

You might also like