Tuesday, October 17, 2023

Create Angular project with material design

Create Angular project with material design

> ng new angular --strict-false

If we add above command in terminal strict mode removed in angular project.

First will install bootstrap libraries

> npm install bootstrap --save

after install bootstrap please install below command also, due to if not install below command not working dropdown with button and dropdown list in our application.

> npm install @popperjs/core

package.json
--------------

"styles": [

"src/styles.css".

"node_modules/bootstrap/dist/css/bootstrap.min.css"

"scripts":[

"node_modules/@popperjs/core/dist/umd/popper.min.js",

"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

after install bootrtrap will install angular meterial install.

> ng add @angular/material

After installation @angular/material below added new line in styles array

package.json

--------------

"styles": [

"@angular/material/prebuilt-themes/indigo-pink.css",

"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"

"scripts":[

"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

index.html
------------

Default display in body tag like below added

<app-root></app-root>

</body>

Note:- Please remove class="mat-typography" (if you use this class every time override bootstrap classes.)

<body>

<app-root></app-root>

</body>

then enter below command in terminals

> ng serve -open

(or)

> ng serve -o

once run the application index.html will go to angular.json then control will go to main.ts file

After install angular material will got some time below error

c:\Users\<systemname>\AppData\Roaming\npm\ng.ps1 can not be loaded because running scripts is disabled on this system

once remove this file "ng.ps1" will not get any error

Create Angular project

Create angular project

First will install node.js in local system then install angular cli to global in local system

https://nodejs.org/en/download

https://angular.io/cli

https://code.visualstudio.com/

after install Visual Studio Code, node js and @angular/cli

we can create angular application through visual studio code

ng new my-project

cd my-project

ng serve (or) ng serve --open (or) ng serve -o

if given ng serve command will run angular application but not open in browser

ng serve --open (or) ng serve -o

when your given command will open angular application in browser

localhost://4200 default angular application local url

Sunday, January 8, 2023

Tab Menu Nav in angular 13

We have three tab menu in main-tabmenu.component page
Tab-1 / Tab-2 / Tab-3

Tab-1 default will display, onclick "Move to tab-2" button in the tab-1 then will move to tab-2.

Previous and next button in tab2.component.html page.

main-tabmenu.component.html
---------------------------------------

<app-tab1 (Tab2DivShow)="EnableTab2($event)" ></app-tab1>

</div>

<app-tab2 (Tab3DivShow)="EnableTab3($event)" (Tab1DivShow)="EnableTab1($event)"></app-tab2>

</div>

<app-tab3></app-tab3>

</div>

-----------------------------------------------------

main-tabmenu.component.ts
----------------------------

import { Component } from '@angular/core';

@Component({
selector: 'app-components',

templateUrl: './components.component.html',

styleUrls: ['./components.component.css']
})

export class ComponentsComponent {

tab1=true;
tab2=false;
tab3=false;

tab1Div = true;
tab2Div = false;
tab3Div = false;

EnableTab1(EnableTab1:any){
this.disableTabs();
this.tab1Div = true;
}

EnableTab2(EnableTab2:any){
this.disableTabs();

this.tab2Div = true;
}

EnableTab3(EnableTab3:any){
this.disableTabs();
this.tab3Div = true;
}

disableTabs(){
this.tab1Div = false;
this.tab2Div = false;
this.tab3Div = false;
}
}

-----------------------------------------------------

tab1.component.html
----------------------------

tab1.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Output() public Tab2DivShow = new EventEmitter();

tab2DivDisplay(){
this.Tab2DivShow.emit("This is from Child Message");
}

tab2.component.html
----------------------------

<button (click)="tab1DivDisplay()">Previous-Tab1</button>

<button (click)="tab3DivDisplay()">tttTab-3</button>

tab2.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Output() public Tab1DivShow = new EventEmitter();

@Output() public Tab3DivShow = new EventEmitter();

tab3DivDisplay(){
this.Tab3DivShow.emit("This is from Child Message");
}

tab1DivDisplay(){
this.Tab1DivShow.emit("This is from Child Message");
}

-----------------------------------------------

Folder Structure
---------------------

app / comp

@Input - @Output

@Input : - Parent to child communication.

@Output :- Child to parent

Parant Component

--------------------------

parent-component.html

<app-parent-component (childInfo)="msg=$event" [fromParent]="parentMsg"></app-parent-component>

parent-component.ts

public parentMsg = "This is parent Message";

msg: any;

Child Component

------------------

child-component.html

</h1>

child-component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Input('fromParent') public parent: any;

@Output() public childInfo = new EventEmitter();

fireEvent(){

this.childInfo.emit("This is from Child");

}

Tuesday, November 9, 2021

Property Binding Angular-10

Property Vs Attributes

Attributes and properties are not the same

Attributes are defined by HTML

Properties are defined by DOM

Attributes initialize DOM properties and then they are done

Attributes values con't change one they are initialized

Property values however can change

<input type="text" disabled="false" id={{userID}} value="Angular Bin" > (Not work disabled)

<input type="text" [disabled]="false" id={{userID}} value="Angular Bin" > (It will work disabled)

<input type="text" [disabled]="isDisabled" id={{userID}} value="Angular Bin" > (It will work disabled)

<input type="text" bind-disabled="isDisabled" id={{userID}} value="Angular Bin" > (It will work disabled)

component.ts

public userID = "Angular 8"

public isDisabled = true;

Interpolation in Angular-10

Interpolation

By using {{ }} we can use the property value only

String interpolation is One Way Data Binding

Which is used to output the data from typescript code

Simply, interpolation is way of binding data from class to template

<p>Welcome to {{title}}</p>

<p>{{"Welcome to :" + title}}</p>

<p>{{title.length}}</p>

<p>{{title.toUpperCase()}}</p>

<p>{{userName()}}</p>

<p>{{myUrl}}</p>

component.ts file

public title = "Angular Bin";

public myUrl = window.location.href;

userName(){

return "Welcome : " + this.title;

}

Saturday, August 15, 2020

How to display image in angular 9

Browse with default image in a form

After select image display View in a form

image.component.html

 <div class="col-md-2 form-group">
   <input type="file" class="form-control"
          #Image accept="image/*" 
          (change)="handleFileInput($event.target.files)" required>
 </div>
 <div class="col-md-1 form-group">
   <img [src]="imageUrl" 
        style="width: 50px; height:50px;border:1px solid #f60;" />
</div>

image.component.ts

export class ImageComponent implements OnInit {
  imageUrl: string = "/assets/img/default-img.png";
  fileToUpload: File = null;

  constructor() { }

 handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);

    // Show image Preview
    var render = new FileReader();
    render.onload = (event: any) => {
       this.imageUrl = event.target.result;
    }
    render.readAsDataURL(this.fileToUpload);
 }

assets --> img (folder Name)--> default-img.png

Browse with default image in a form

After select image display View in a form