All about coding channel.π»π₯
βΆοΈ Command to download angular if u already installed node js : npm install -g @angular/cli
βΆοΈ How to check whether node is already installed in your pc,command :
npm -v
βΆοΈ How to check whether angular is installed properly or not,command :
ng v
npm -v
βΆοΈ How to check whether angular is installed properly or not,command :
ng v
All about coding channel.π»π₯
βΆοΈ How to check whether node is already installed in your pc,command : npm -v βΆοΈ How to check whether angular is installed properly or not,command : ng v
βΆοΈ How to create new angular project,command :
ng new <projectName>
ng new <projectName>
All about coding channel.π»π₯
βΆοΈ How to create new angular project,command : ng new <projectName>
βΆοΈ How to create a new component in angular,command :
ng generate component <componentName>
or
ng g c <componentName>
ng generate component <componentName>
or
ng g c <componentName>
All about coding channel.π»π₯
βΆοΈ How to create a new component in angular,command : ng generate component <componentName> or ng g c <componentName>
βΆοΈ Everything written inside @Component is called Decorator.
All about coding channel.π»π₯
βΆοΈ Everything written inside @Component is called Decorator.
1. One Way Data Binding :
a) {{variable name -One way data binding}} - Interpolation
<div class="col-6">
1. Interpolation
<p>First Name => {{firstName}}</p>
<div>{{rollNo}}</div>
</div>
b) [Property of element] = "firstName/variable name"-One way data binding - Property Binding
<div class="col-6">
2. Property Binding
<div>
<input type="text" [value]="firstName" name="" id="" >
<br>
<input type="text" [placeholder]="myPlaceHolder" name="" id="">
<br>
<div [class]="div1ClassName" style="height: 100px; width: 100px;"> </div>
</div>
</div>
c) (click)= "showWelcomeMessage()/Any method name"- One way data binding - Event Binding
<div class="col-3">
<button class="btn btn-success" (click)="showWelcomeMessage()">Show Welcome Text</button>
</div>
a) {{variable name -One way data binding}} - Interpolation
<div class="col-6">
1. Interpolation
<p>First Name => {{firstName}}</p>
<div>{{rollNo}}</div>
</div>
b) [Property of element] = "firstName/variable name"-One way data binding - Property Binding
<div class="col-6">
2. Property Binding
<div>
<input type="text" [value]="firstName" name="" id="" >
<br>
<input type="text" [placeholder]="myPlaceHolder" name="" id="">
<br>
<div [class]="div1ClassName" style="height: 100px; width: 100px;"> </div>
</div>
</div>
c) (click)= "showWelcomeMessage()/Any method name"- One way data binding - Event Binding
<div class="col-3">
<button class="btn btn-success" (click)="showWelcomeMessage()">Show Welcome Text</button>
</div>
All about coding channel.π»π₯
1. One Way Data Binding : a) {{variable name -One way data binding}} - Interpolation <div class="col-6"> 1. Interpolation <p>First Name => {{firstName}}</p> <div>{{rollNo}}</div> </div> b) [Property of element] = "firstName/variableβ¦
2. Two way data binding :
<div class="col-3">
<input type="text" [(ngModel)]="firstName" >
</div>
<div class="col-3">
<input type="text" [(ngModel)]="firstName" >
</div>
All about coding channel.π»π₯
βΆοΈ Angular essentials :
React Essentials:
All about coding channel.π»π₯
React Essentials:
To create a new React application , we need to have node.js installed our pc.
βΆοΈ Creating a new React Application :-
> npx create-react-app my-app
create-react-app is the actual command to actually create the project.
or(Modern Approach)
npm create vite@latest my-react-app-learning-react
Followed by checking following check boxes as follows :
β Select a framework:
β React
β
β Select a variant:
β TypeScript
β
β Which linter to use?
β ESLint
β
β Install with npm and start now?
β Yes
βΆοΈ Creating a new React Application :-
> npx create-react-app my-app
create-react-app is the actual command to actually create the project.
or(Modern Approach)
npm create vite@latest my-react-app-learning-react
Followed by checking following check boxes as follows :
β Select a framework:
β React
β
β Select a variant:
β TypeScript
β
β Which linter to use?
β ESLint
β
β Install with npm and start now?
β Yes
All about coding channel.π»π₯
To create a new React application , we need to have node.js installed our pc. βΆοΈ Creating a new React Application :- > npx create-react-app my-app create-react-app is the actual command to actually create the project. or(Modern Approach)β¦
-> Web browsers do not understand Typescript natively.
-> Have to convert TypeScript to Javascript code.
-> This is known as "transpiling".
-> Have to convert TypeScript to Javascript code.
-> This is known as "transpiling".
All about coding channel.π»π₯
-> Web browsers do not understand Typescript natively. -> Have to convert TypeScript to Javascript code. -> This is known as "transpiling".
βΆοΈ How to compile the code :-
tsc sample-types.ts
βΆοΈ How to run the code :-
node sample-types.js
tsc sample-types.ts
βΆοΈ How to run the code :-
node sample-types.js
All about coding channel.π»π₯
βΆοΈ How to compile the code :- tsc sample-types.ts βΆοΈ How to run the code :- node sample-types.js
Note : By default , tsc will Still generate a .js File , so to prevent this we have to use a compiler flag as follows :-
tsc -noEmitOnError FileName.ts
PS C:\Users\subham.krishna\Desktop\typescript training\02-variables> tsc -noEmitOnError sample-types.ts
tsc -noEmitOnError FileName.ts
PS C:\Users\subham.krishna\Desktop\typescript training\02-variables> tsc -noEmitOnError sample-types.ts
All about coding channel.π»π₯
Note : By default , tsc will Still generate a .js File , so to prevent this we have to use a compiler flag as follows :- tsc -noEmitOnError FileName.ts PS C:\Users\subham.krishna\Desktop\typescript training\02-variables> tsc -noEmitOnError sample-types.ts
βΆοΈ TypeScript Loops and Arrays :-
File : Loops.ts
for(let i =0 ; i<5;i++){
console.log(i);
βββββββββββββββββ
let reviews: number[] = [5,5,4,5,1,3];
Looping through an array :-
for(let i =0; i<reviews.length;i++) {
console.log(reviews[i];
}
ββββββββββββββββββ--
File : reviews.ts :-
let reviews: number[] = [5,5,4.5,1,3];
let total : number =0;
for(let i=0;i<reviews.length;i++) {
console.log(reviews[i];
total +=reviews[i];
File : Loops.ts
for(let i =0 ; i<5;i++){
console.log(i);
βββββββββββββββββ
let reviews: number[] = [5,5,4,5,1,3];
Looping through an array :-
for(let i =0; i<reviews.length;i++) {
console.log(reviews[i];
}
ββββββββββββββββββ--
File : reviews.ts :-
let reviews: number[] = [5,5,4.5,1,3];
let total : number =0;
for(let i=0;i<reviews.length;i++) {
console.log(reviews[i];
total +=reviews[i];