The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design. Think of the CDK as a blank state of well-tested functionality upon which you can develop your own bespoke components.
material.angular.io/cdk/categories
3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io
Let’s start with a common use case. You have some data you get from external source (e.g. by calling API). You want to display it on screen.However, instead of displaying it on the same component, you would like to pass the data to a child component to display.The child component might has some logic to pre-process the data before showing on screen.
…
Solution 1: Use *ngIf
Solution 2: Use ngOnChanges
Solution 3: Use RxJs BehaviorSubject
Source: 3 Ways to Pass Async Data to Angular 2+ Child Components ― Scotch.io
Handling Observables with NgIf and the Async Pipe
Angular Bootstrap
Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem.
No dependencies on 3rd party JavaScript.
ng-bootstrap.github.io/#/home
Internet Explorer 11 and Angular 2+ – Agilix – Medium
IE 11 and Angular don’t always mix. I must say that there’s quite the support provided by the Angular dev team and community. But, there are things that really aren’t up for the Angular devs to fix.
I’ve created a small list of issues I’ve encountered when developing and Angular 5 application for an IE 11 client.
Source: Internet Explorer 11 and Angular 2+ – Agilix – Medium
Javascript debugging helper – Count number of eventlisteners in Chrome console
Paste and run one of the code blocks below in chrome console to get eventlisteners count.
//eventlisteners counter - grouped summary Array.from(document.querySelectorAll('*')) .reduce(function(pre, dom){ var evtObj = getEventListeners(dom) Object.keys(evtObj).forEach(function (evt) { if (typeof pre[evt] === 'undefined') { pre[evt] = 0 } pre[evt] += evtObj[evt].length }) return pre }, {}) //_------------------------------------------- // //eventlisteners - totalcount var totalCount = 0; Array.from(document.querySelectorAll('*')).reduce(function(pre, dom){ var evtObj = getEventListeners(dom) Object.keys(evtObj).forEach(function (evt) { if (typeof pre[evt] === 'undefined') { pre[evt] = 0 } // pre[evt] += evtObj[evt].length totalCount += evtObj[evt].length; }) return totalCount; }, {}) //---------------------------------------
Angular: Tips. The importance of Pipes – codeburst
What we all like in Angular primarily is that it all mostly about templates. Templates are smart, dynamic, they use change detection to update themselves on a moment’s notice when a model is updated, the can manage HTML elements and nested components, enrich the markup with directives and make on-the fly data transformations, and the template syntax is amazing. The tools provided are vast and rich, but is it up to us to use them wisely.
How to avoid website jank: a lot of performance tips
We see more and more websites that do not care of the performances.
They are slow, fat, embed lots of resources, make you download several MBs, are not fluid when you scroll down, are not fluid when you click on something, are not responsive, have slow animations. It’s easy to make a website, but it’s harder to make it good. A slow website will have a big churn in its users, because the navigation was crappy.
www.sderosiaux.com/articles/2015/03/01/perfmatters/
jasmine parameterized unit test – Stack Overflow
Based on piotrek’s answer and the article Parameterized testing in Javascript, you could also use the following approach which uses ES6 syntax:
[ ['abc', 3], ['ab', 2], ['', 0], ].forEach(([string, expectedLength]) => { it(`should return length ${expectedLength} for string "${string}"`, () => { expect(string.length).toBe(expectedLength); }); });I have tested it with the Jest test framework, but it should work with Jasmine as well.
keyboard shortcuts – Locate current file in IntelliJ/WebStorm – Stack Overflow
Select current file in project view
The current version of IntelliJ has renamed this to “Select In” under the Navigate category. The default shortcut is still ALT-F1
Source: keyboard shortcuts – Locate current file in IntelliJ – Stack Overflow