ng-change function Calling on-load before selecting

Issue Calling ng-change=”changeStudentStatus();” function on-load, before selecting options. <md-select ng-model=”ctrl.newStudentStatus” ng-change=”changeStudentStatus();” ng-if=”ctrl.studentStatusList” > <md-option class=”ss-options” ng-value=”item.display_name” ng-repeat=”item in ctrl.studentStatusList” ng-selected=”item.id == ctrl.statusId”>{{item.display_name}}</md-option> </md-select> Script : $scope.changeStudentStatus = function(){ //some logic }; it should Call when use change the DropDown. whats

Continue reading

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px

Continue reading

How can I set duration of a snack-bar in angular2 (material2)

Issue This example stays forever on the screen: snack-bar-demo.ts import {Component, ViewContainerRef} from ‘@angular/core’; import {MdSnackBar, MdSnackBarConfig} from ‘@angular/material’; @Component({ moduleId: module.id, selector: ‘snack-bar-demo’, templateUrl: ‘snack-bar-demo.html’, }) export class SnackBarDemo { message: string = ‘Snack Bar opened.’; actionButtonLabel: string =

Continue reading

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px

Continue reading

MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')

Issue After I created ThemeSetting.tsx context I cannot use <Button><Button> and all things that use theme of materialUI ReactJS , Typescript error TypeError: Cannot read properties of undefined (reading ‘create’) push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67 64 | minWidth: 64, 65 | padding: ‘6px

Continue reading

Expansion-panel from material angular 4

Issue I hava an angular 4.4.4 application with material 2.0.0-beta.12 and I want to use the mat-expansion-panel from material design. This is my code : <mat-expansion-panel class=”parametersPanel”> <mat-expansion-panel-header> <mat-panel-title> PARAMETERS </mat-panel-title> </mat-expansion-panel-header> <table style=”width:100%”> <tbody> <tr class=”parameterListItem”> <td class=”icon”><img src=”assets/images/alert.png”></td>

Continue reading

How to display data from normal HTML table to Angular Material Table? i want exact my HTML into mat table html.!

Issue THIS IS MY TS FILE import { Component, OnInit } from ‘@angular/core’; import { RecommendationService } from ‘../recommendation-service.service’; import { CustomHttpService } from ‘app/services/custom-http.service’; @Component({ selector: ‘app-opportunity’, templateUrl: ‘./opportunity.component.html’, styleUrls: [‘./opportunity.component.scss’], providers: [RecommendationService] }) export class OpportunityComponent implements OnInit

Continue reading

material angular sidenav trigger resize

Issue I’m using angular 8 and material theme. Following https://material.angular.io/components/sidenav/overview I’m generating the content inside <mat-sidenav> </mat-sidenav> dynamically by user input. When I toggle the status, it automatically resizes the content. For example, when I first opened it is like

Continue reading

Angular 4 template reference variables

Issue is it possible to have a dynamic template reference variable? for example, i would like to do something like this: <tr *ngFor=”let item of items.controls; let i=index” > <th >{{i}}</th> <td> <mat-form-field> <input matInput matDatepicker=”{{‘pick’+i}}” placeholder=”date” formControlName=”date”> <mat-datepicker-toggle matSuffix

Continue reading

How to populate inside array of array

Issue I want to access id’s inside the recordId [ { recordId: [ 5d836ceb2afc1764751f8d8c, 5d836ceb2afc1764751f8d92, 5d836ceb2afc1764751f8d95 ], isDelete: false, _id: 5ec278f6da31482240554476, createdAt: 2020-05-18T12:00:54.355Z, updatedAt: 2020-05-18T12:00:54.355Z, __v: 0 }, { recordId: [ 5d836ceb2afc1764751f8d8c, 5d836ceb2afc1764751f8d92, 5d836ceb2afc1764751f8d95 ], isDelete: false, _id: 5ec276334e094223c84a398e, createdAt:

Continue reading

Is it possible to make an md-button smaller?

Issue I want my buttons showing left- and right arrow and NOW text to be as small as possible. How do I do that? <div ng-controller=”DateCtrl” layout=”row” flex> <md-datepicker ng-model=”activeDate” md-placeholder=”Enter date” ng-change=”changeDate()”></md-datepicker> <div> <md-button class=”md-raised” ng-click=”prev()”>&lt;</md-button> <md-button class=”md-raised” ng-click=”changeToday()”>NOW</md-button>

Continue reading

Angular 6 Material <mat-select> multiple set default value using form control

Issue I am using form control here is code for my html component <mat-form-field> <mat-select placeholder=”Toppings” [formControl]=”toppings” multiple> <mat-option *ngFor=”let topping of toppingList” [value]=”topping”>{{topping.value}}</mat-option> </mat-select> </mat-form-field> And my ts file is export class SelectMultipleExample { toppings = new FormControl(); toppingList:

Continue reading

Angular material stepper styling

Issue Hi I want to customize the existing angular material steper ui like the given image. Is it possible to change the icon programatically,If there is an error then it should show an error icon with red color https://stackblitz.com/edit/angular-4rvy2s-sprtoe?file=app/stepper-overview-example.ts Solution

Continue reading

Angular Material Table dataSource not binding correctly/updating, no errors yet nothing works

Issue When inspecting served page: <table _ngcontent-c6=”” class=”mat-elevation-z8 mat-table” fxfill=”” mat-table=”” matsort=”” role=”grid” ng-reflect-data-source=”[object Object]”> In View: table matSort fxfill mat-table [dataSource]=”dataSource” class=”mat-elevation-z8″ In Controller/Constructor: this.dataSource = new MatTableDataSource(this.section1) this.dataSource.sort = this.sort; this.service.getSection1().subscribe(data => { this.section1 = data; console.log(this.section1); })

Continue reading

How to use md-icon with md-autocomplete in Angular-Material Design?

Issue Is there any way to place md-icon in md-autocomplete <md-autocomplete md-selected-item=”ctrl.selectedItem” md-search-text-change=”ctrl.searchTextChange(ctrl.searchText)” md-search-text=”ctrl.searchText” md-items=”item in ctrl.querySearch(ctrl.searchText)” md-item-text=”item.display” placeholder=”What is your favorite US state?”> <md-icon class=”material-icon”>search</md-icon> // ofcourse, I think It won’t work </md-autocomplete> codepen Solution This is not yet

Continue reading

Angular2 Material Tooltips – Class is not being added

Issue I have the following component.html: <tr> <td> <span matTooltipClass=”primary-tooltip” matTooltipPosition=”above” matTooltipHideDelay=”100000″ matTooltip=”{{cert.awsCertId}}”><p style=”overflow:hidden;text-overflow: ellipsis;max-width:120px”>{{cert.awsCertId}}</p></span> </td> </tr> In my component.scss: .primary-tooltip { min-width: 300px; background-color: #FC5558; } As per the docs this should add a custom class to the material

Continue reading

Angular Material Button Disable Style Change

Issue form.html <md-button class=”md-raised md-primary pull-right formPage” ng-disabled=”formPage.$invalid” ng-click =”submit()”>SAVE</md-button> css .md-button.md-raised.md-primary.formPage { position: right !important; color: #FFFFFF; background-color:#008cba; } Button is disabled but it has custom color from my css. How can i show the default disable style or

Continue reading

TypeError when creating a new MatTable with Angular Material 2

Issue I’m creating a table using mat-tableĀ (from MatTableModule) but I’m getting the following error: ERROR TypeError: Cannot read property ‘addClass’ of undefined at MatHeaderCell.CdkHeaderCell (table.es5.js:275) at new MatHeaderCell (table.es5.js:132) at createClass (core.js:12166) at createDirectiveInstance (core.js:12011) at createViewNodes (core.js:13449) at createEmbeddedView

Continue reading

Angular PrimeNG p-dialog with tabs

Issue I am using primeng to create a dialog with tabs, this is my template: <p-dialog [(visible)]="displayDialog" (onHide)="cancel()" [style]="{width: ’50vw’}" [baseZIndex]="10000"> <p-tabView [controlClose]="displayDialog"> <p-tabPanel header="Header 1" [headerStyle]='{"width": "70px"}’>Text 1</p-tabPanel> <p-tabPanel header="Header 2" [headerStyle]='{"width": "70px"}’> Text 2</p-tabPanel> <p-tabPanel header="Header 3" [headerStyle]='{"width":

Continue reading

Separate controller per tab in angular-material w/ ui-router

Issue I’m trying to implement my md-tabs so each md-tab is a separate state using angular-material. My current markup looks like this: md-tabs.is-flex.auto-flex(selected=”selectedIndex”,layout=”vertical”) md-tab(on-select=”selectTab(0)”,label=”Player”,ui-sref=”state1″) div.tab(ui-view) md-tab(on-select=”selectTab(1)”,label=”Map”,ui-sref=”state2″) div.tab(ui-view) I don’t think this is valid markup for ui-router, though. Is it possible

Continue reading

Angular Material Table Sorting with reactive formarray

Issue I am trying to implement sorting / filtering on angular material table with formArray as input data source. StackBlits code link dataSource = new MatTableDataSource([]); <table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort > <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay"

Continue reading

Passing data to mdDialog

Issue Main listing page has edit button. Which opens details of the edited row. Way-1: Now, if I set “ctrl.parent.q_details.client_location” it is bind with parent listing controller and it works as 2-way binding and automatically changes the values as in

Continue reading