<ng-container [ngSwitch]=”activeLayout”> <ng-container *ngSwitchCase=”‘layout1′” [ngTemplateOutlet]=”template1″></ng-container> <ng-container *ngSwitchDefault [ngTemplateOutlet]=”defaultTemplate”></ng-container> </ng-container> This is my solution when I need to make a switch of different ng-template. I hope it works for you.
The styling is done by CSS (look at the CSS tab on the example page). I tweaked it to work with mat-table: .cdk-drag-preview { box-sizing: border-box; border-radius: 4px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder … Read more
StackBlitz pipe implementation in TS would look like this import { Pipe } from “@angular/core”; @Pipe({ name: “phone” }) export class PhonePipe { transform(rawNum) { rawNum = rawNum.charAt(0) != 0 ? “0” + rawNum : “” + rawNum; let newStr = “”; let i = 0; for (; i < Math.floor(rawNum.length / 2) – 1; … Read more
I had the same issue, this is the working solution i found on git hub. https://github.com/ChainSafe/web3.js/issues/4070 run in your project directory: npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify tsconfig.json Add this in:”compilerOptions”: { […] } “paths” : { “crypto”: [“./node_modules/crypto-browserify”], “stream”: [“./node_modules/stream-browserify”], “assert”: [“./node_modules/assert”], “http”: [“./node_modules/stream-http”], “https”: [“./node_modules/https-browserify”], “os”: [“./node_modules/os-browserify”], }
This extra div is actually quite annoying. As it turns out though, you can use shadow-piercing to apply a style to it without changing the CSS emulation mode. You can do this using the ::ng-deep combinator as such: ::ng-deep .mat-card-header-text { /* CSS styles go here */ margin: 0px; // for example to remove the … Read more
no need of any directives. just use [hidden] it will work ex:[hidden]=”show” in html and set show to boolean in ts file. my html code: <ng-container matColumnDef=”department” > <mat-header-cell [hidden]=”show” *matHeaderCellDef> Department </mat-header-cell> <mat-cell [hidden]=”show” *matCellDef=”let element”> {{element.department}} </mat-cell> </ng-container>
We have to make IIS fall back to index.html by adding a rewrite rule. Step 1: Install IIS URL Rewrite Module Step 2: Add a rewrite rule to web.config <?xml version=”1.0″ encoding=”utf-8″?> <configuration> <system.webServer> <rewrite> <rules> <rule name=”AngularJS Routes” stopProcessing=”true”> <match url=”.*” /> <conditions logicalGrouping=”MatchAll”> <add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” /> <add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” /> … Read more
I’ve just had the same issue and have solved it using Will’s comment to the original post, adding a click handler with $event.stopPropagation to the cell as the direct parent to the button. I’ll add it here as a solution in case anyone else comes here looking for the same answer. I have a Material … Read more
This can happen if the order of scripts is incorrect. <!– ERROR: Angular requires Zone.js polyfill –> <script src=”https://stackoverflow.com/questions/39592949/main.js”></script> <script src=”https://stackoverflow.com/questions/39592949/runtime.js”></script> <script src=”polyfills.js”></script> Correct order: <!– Success –> <script src=”https://stackoverflow.com/questions/39592949/runtime.js”></script> <script src=”polyfills.js”></script> <script src=”https://stackoverflow.com/questions/39592949/main.js”></script>
Change this line: httpClientSpy.get.and.returnValue(asyncData(expectedHeroes)); to use the Observable operator of() httpClientSpy.get.and.returnValue(of(expectedHeroes)); This will return an observable that can be subscribed to and will return expectedHeroes. If you are using Angular 6, you can import this directly from rxjs: import {of} from ‘rxjs’;