Skip to main content

Posts

Showing posts from September, 2018

Material Angular Table Column Header With Multi Selection,Material Angular Table Column Selection,Mat-Table

Material Angular Table Column Header With Multi-Selection| Material Angular Table Header Column Check Box  Sometimes we need multi-selection in a single click & here we discussed. Knowledge required  MatCheckboxModule-mat-checkbox,MaterialCheckBox Module  MatTableModule- mat-table,MatTable Module  TwoWayBinding  Typescript array  Step 1: Modules to import  import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; import {MatCheckboxModule} from '@angular/material/checkbox'; Step 2: Have to define a class  type for two way binding with mattable export interface people {   name: string;   Sno: number;   canspeak: boolean;   canwrite: boolean; } Step 3 : Create an array for the people type  const ELEMENT_DATA: people[] = [   {Sno: 1, name: 'John', canspeak: false, canwrite: false},   {Sno: 2, name: 'Miller', canspeak:

Angular Flex Layout, Angular responsive layout, Angular responsive layout using flex layout

Angular Flex Layout Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.  Refer Flex Layout @ Github . Step 1: Add Flexlayout to project  npm i --save @angular/flex-layout Step 2:  Import it in app.module.ts import {FlexLayoutModule} from "@angular/flex-layout"; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule, BrowserAnimationsModule, MatButtonModule, HttpClientModule, FlexLayoutModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } Step 3: In Required Component's HTML Template Add a div with fxLayout directive <div fxLayout> </div> The fxLayout directive on the container sets the flex container. Defaults to row. MediaQueries and Aliases breakpoint - mediaQ

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"

Typescript Array ,Typescript Array Declaration,Typescript Array foreach,Typescript Array Concat ,Pop, Push

TypeScript Type Test Part 2 Working with Array Like javascript type script allows to work with an array of values Declaration  Two Type of Declaration  //With Element Type  MostSpokenLangs: string[] = [' Mandarin Chinese','English','Hindustani ', 'Spanish','Arabic','Malay','Russian','Bengali','Portuguese','French']; //generic Type  MostSpokenLangs: Array<string> = [' Mandarin Chinese','English','Hindustani ', 'Spanish','Arabic','Malay','Russian','Bengali','Portuguese','French']; Length to find the length of the array arrayname.length ElementAccess  to  access  a element in a array arrayname[elementindex]= value  foreach()  for each element in the array foreachaccess() {   this.myarrayoutput.foreachaccess ='';   this.MostSpokenLangs.forEach(el => {     this.myarrayoutpu