Skip to main content

Posts

Showing posts with the label Creative Ideas

Material Angular Table with sticky header,sticky column and Sticky Footer,Material Angular Table Part 3

Material Angular Table with sticky header, sticky column and Sticky Footer Part 3 Refer Mat-Table from material Angular io Table with sticky header By using position: sticky styling, the table's rows and columns can be fixed so that they do not leave the viewport even when scrolled. use sticky input to the matHeaderRowDef as below  <tr mat-header-row *matHeaderRowDef="customerdisplayedColumns; sticky: true"></tr> Table with sticky Footer use sticky input to the matFooterRowDef as below  <tr mat-footer-row *matFooterRowDef="customerdisplayedColumns; sticky: true"></tr> Table with a sticky columns use sticky input to the matColumnDef as below  <ng-container matColumnDef="name" sticky >     <th mat-header-cell *matHeaderCellDef mat-sort-header >Name</th>     <td mat-cell *matCellDef="let element"> {{element.name}}       </td>     <td mat-footer-cell *matFo

Material Angular,Material Angular Menu,Dynamic Material Angular Menu

Dynamic Angular Material Menu Refer Basics of Angular Material Menu from Material.IO Refer Angular Material Menu's Focus Idea Here we discussed Material Angular Menu's Dynamic Binding Import Material Angular MenuAPI  import {MatMenuModule} from '@angular/material/menu'; Directives Used MatMenu, MatMenuItem, MatMenuTrigger Step 1 :  Create SubmenuitemsComponent ng g c Submenuitems Step 2:In SubmenuitemsComponent.ts  @Input() SubMenuItems: Array<MenuItem>; @ViewChild('Submenuitem') public Submenuitem; @Output() SelectedMenu: EventEmitter<MenuItem> = new EventEmitter(); clickeventhandler(menu) { this.SelectedMenu.emit(menu); } Step 3:In SubmenuitemsComponent.html <mat-menu #Submenuitem="matMenu" [overlapTrigger]="false" >   <div *ngFor="let submenu of SubMenuItems" > <span *ngIf="submenu.SubMenuItems && submenu.SubMenuItems.length > 0"