Posts

Create angular drag and drop component using angular material api

-
Image
Follow the below steps to build drag and drop component:- ng add @angular/cli ng new fms ng add @angular/material ng add @angular/cdk ng generate @angular/cdk:drag-drop draganddrop draganddrop.component.html < div class = "container" > < h2 >To do</ h2 > < div cdkDropList #todoList = "cdkDropList" [cdkDropListData] = "todo" [cdkDropListConnectedTo] = "doneList" class = "list" (cdkDropListDropped) = "drop($event)" > < div class = "list-item" *ngFor = "let item of todo" cdkDrag >{{item}}</ div > </ div > </ div > < div class = "container" > < h2 >Done</ h2 > < div cdkDropList #doneList = "cdkDropList" [cdkDropListData] = "done" [cdkDropListConnectedTo] = "todoList" class = "list" (cdkDropListDropped)
Read more

Create angular tree component using angular material api

-
Image
Follow the below steps to build user tree component:- ng add @angular/cli ng new fms ng add @angular/material ng add @ang ular/cdk ng generate @angular/material:tree tree tree.component.html < mat-tree [dataSource] = "dataSource" [treeControl] = "treeControl" > < mat-tree-node *matTreeNodeDef = "let node" matTreeNodeToggle matTreeNodePadding > < button mat-icon-button disabled ></ button > < mat-icon class = "type-icon" [attr.aria-label] = "node.type + 'icon'" > {{ node.type === 'file' ? 'description' : 'folder' }} </ mat-icon > {{node.name}} </ mat-tree-node > < mat-tree-node *matTreeNodeDef = "let node; when: hasChild" matTreeNodePadding > < button mat-icon-button matTreeNodeToggle [attr.aria-label] = "'toggle ' + node.name" > < mat-icon class = &
Read more

Create angular layout using angular material api

-
Image
Follow the below steps to build layout component:- ng add @angular/cli ng nlew fms ng add @angular/ material ng add @angular/cdk ng add @angular/material ng generate @angular/material:nav mainLayout main-layout.component.html < mat-sidenav-container class = "sidenav-container" > < mat-sidenav #drawer class = "sidenav" fixedInViewport = "true" [attr.role] = "(isHandset$ | async) ? 'dialog' : 'navigation'" [mode] = "(isHandset$ | async) ? 'over' : 'side'" [opened] = "!(isHandset$ | async)" > < mat-toolbar >Menu</ mat-toolbar > < mat-nav-list > < a mat-list-item href = "#" >Link 1</ a > < a mat-list-item href = "#" >Link 2</ a > < a mat-list-item href = "#" >Link 3</ a > </ mat-
Read more