angular-material2

I am trying to get Angular material table to work with an api call to my database I get the right data I just want to display with the new material table and for some reason this is not working as expected. this is my main component import { Component } from '@angular/core'; import {AosService} from './app.aos.service.component' import {QuoteModel} from './QuoteModel' import {DataSource} from '@angular/cdk'; @Component({ selector: 'app-aos', providers: [AosService], templateUrl: './app.aos.quoteQuery.component.html', styleUrls: ['./app.aos.quoteQuery.component.scss'] }) export class

I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it. <md-card class="full-width full-height border-box "> <div class="adv"> <script type="text/javascript" language="javascript"> var aax_size = '728x90'; var aax_pubname = 'XXXXXXXXXXX'; var aax_src = '302'; </script> <script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script> </div> </md-card> I also tried to to bind it using property binding <span

The Portal module in Angular Material (CDK) is a very powerful way to render dynamic content into a 'PortalOutlet'. A Portal<T> can be a TemplateRef where T is the type of the context data. <ng-template cdkPortal let-data> <p>Portal contents {{ data | json }}</p> </ng-template> You get a reference to it with @ViewChild @ViewChild(CdkPortal) myPortalRef: CdkPortal; You can display a portal in a cdkPortalOutlet Content gets inserted here: <ng-template [cdkPortalOutlet]="myPortalRef"></ng-template> This will insert the portal contents into the outlet. But there are two big missing features with

In Angular, is it possible to have a linear stepper where the individual steps are separate components? For example: <mat-horizontal-stepper [linear]="isLinear"> <mat-step [stepControl]="firstFormGroup" label="Some Form"> <first-component></first-component> </mat-step> <mat-step [stepControl]="secondFormGroup" label="Another Form"> <second-component></second-component> </mat-step> <mat-step [stepControl]="thirdFormGroup" label="Review"> <third-component></third-component> </mat-step> </mat-horizontal-stepper> When I try this, I receive the following error upon hitting the matStepperNext button

I'm trying to change my layout dynamically according to users' language selection and switch from LTR to RTL on the fly. I'm using Angular 2 rc6, material 2.0.0-alpha.9-3 It looks like when the page is loaded, it works perfectly with either rtl or ltr. However, when it's changed dynamically from within the app (see plunker), the direction changes but the generated element md-sidenav-content has a miscalculated margin-right and margin-left. Digging further, I managed to see that the _dir object has an eventEmitter that should watch for on change events of _dir and recalculate the margins

There is an issue I have discovered with Ng-Idle, Material 6 nad Angular 6 "@ng-idle/core": "^6.0.0-beta.3" "@ng-idle/keepalive": "^6.0.0-beta.3" "@angular/core": "^6.1.9" "@angular/cdk": "^6.4.7" "@angular/material": "^6.4.7" The scenario when ever a user has gone idle, a dialog (popup) displays a countdown how long until the user is logged out of the system. If the user return prior to being logged out with mouse activity, the countdown will halt and the dialog will close/disappear. Issue However, in Angular 5, this feature was working fine until I upgraded to Angular 6. When ever the user

i have a large list and i want to load it as the user scroll down the select field but how can i get the scroll event in mat-select there is no event that fire the scroll event. <mat-form-field> <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()"> <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right"> <mat-option (scroll)="docScroll()" [value]="dr"> {{dr.name}} </mat-option> </div> </mat-select> <mat-hint>List Of Doctor In Your city</mat-hint> <mat-error *ngIf="selectedDoc.hasError('required')">Please