All about coding channel.πŸ’»πŸ–₯
230 subscribers
74 photos
8 videos
264 files
214 links
Download Telegram
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
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>
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>
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
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
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];