Scribd
Upload
31 views5 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views5 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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