HTML form elements already provide for an “autofocus” attribute that will pull focus to an input field after it is rendered on the page. This is great for static pages; but, in my experience, using the autofocus attribute in an Angular 5 application can be a bit hit-and-miss. It will often work the first time that an input is rendered; but, it will then stop working even if that input is hidden and re-rendered. As such, I usually end-up creating an autofocus attribute directive that wraps the focus workflow in a timer. Encapsulating the autofocus in an attribute directive has the added benefit of being able to (somewhat) programmatically control which input receives focus.
Source: Creating An Input-Driven AutoFocus Directive In Angular 5.0.2
This post has been published first on CodingTheSmartWay.com.
This is the fourth part of the Angular Material series on CodingTheSmartWay.com. In this part, we’ll be focusing on Data Tables. Of course, this part again assumes that you’re familiar with the Angular Material library in general and that you know how to setup an Angular project and install the Angular Material library in that project. If you’re new to Angular Material please first take a look at the first part of this series: Angular Material — Part 1 Introduction or visit the Angular Material Website at https://material.angular.io .
Source: Angular Material — Part 4: Data Table – CodingTheSmartWay.com Blog – Medium
Angular is pretty good. But it likes to own the page, if not the whole website. It is hard to,
a) Have Angular co-exist with other stacks
b) Inject angular for one small quick job
c) Package an angular “widget” for use in wordpress, sharepoint, etc.
Interestingly, this is something AngularJS used to be able to do, but Angular has sort of lost this on its way. Technically all of the above is possible with Angular, but it’s complex. Very complex.
And this is exactly the gap that Angular Elements fulfills.
Source: Angular Elements and SPFx – Winsmarts.com
We made a little video to give you an overview of the new features. If you want to dive deeper into what has changed, keep on reading after watching it ;).
Angular 5 is out! Which new features are included?
Source: What’s new in Angular 5? | Ninja Squad
Smooth, highly-responsive interfaces increase users’ confidence in an application and create an overall positive experience. Whereas small applications with simple interactions are built without a focus on runtime performance, standard approaches sometimes do not scale well as the data size or feature complexity increases. A common scenario that may be familiar to the reader is a table that works well with small quantities of data but begins stuttering and lagging when the amount of data is increased. This guide will show how to increase performance in these kinds of applications.
Source: Angular Runtime Performance Guide – The Oasis Digital BlogThe Oasis Digital Blog
Source: Best VS Code Extensions for Angular v2+ Development ― Scotch
In this tutorial, we will learn how ngDoCheck lifecycle hook works. We will find out how to keep track of the changes to @Input properties using the DoCheck hook. We also look at the how key-value differs and Iterable differs works.
Source: Angular ngDoCheck Life Cycle Hook – TekTutorialsHub
I started digging into the Angular 2 Router a year ago when Angular 2 was still just a release-candidate (RC). At the time, the in-built Router had a fatal flaw: it wouldn’t allow <router-outlet> directives to be conditionally rendered in the DOM (Document Object Model). This was a show-stopper for a complex user interface (UI) like InVision App. To get around this, I switched over to the ngRx Router, which worked beautifully. Until the ngRx Router was end-of-lifed. At which point I just gave up and stopped experimenting with routing. Now, over a year later, I wanted to check back in with the Angular 4 Router to see if the situation had improved. And, thankfully it has. Mostly. With Angular 4.4.0, conditional Router outlets now mostly work. “Mostly” in that they are allowed; but, “mostly” in that they do break in certain circumstances.
Source: Conditional Router Outlets Mostly Work In Angular 4.4.0-RC.0
Angular CLI 1.4.0 is out with some nice new features!
If you want to upgrade to 1.4.0 without pain (or to any other version, BTW), I have created a Github project to help: angular-cli-diff. Choose the version you’re currently using (1.2.1 for example), and the target version (1.4.0 for example), and it gives you a diff of all files created by the CLI: angular-cli-diff/compare/1.2.1…1.4.0. You have no excuse for staying behind anymore!
Source: What’s new in Angular CLI 1.4? | Ninja Squad