Angular Jobs

Today in Top Angular News – Sunday, October 7

Today in Top Angular News – Sunday, October 7

Today’s topics include angular, AngularJS, design, 100DaysOfCode, vue, node, react, nodejs, vuejs, and reactjs. Special thanks to contributors @maxim.koretskyi, Max Wizard K, Jeremy Likness, MockupTiger, by Rehmaanali, rehmaanalis, @stephenfluin, Stephen Fluin, @NetanelBasal, Netanel Basal, @ohansemmanuel, Ohans Emmanuel, 726514847387360, Vamsi Vempati, and @dleroari, Dler Ari.


Cool Password Validation – Angular Reactive Forms – The InfoGrid

We will create a normal reactive form as you normally would:

Then, we add our inidual form controls:

Then, we need to show validation errors to users. The same goes for confirming whether confirm password and password are a match:

We can also add a red border around our form field to give the error some prominence. We are going to add is-invalid bootstrap class using ngClass, adding the class when the form control has an error and remove it when there is no error:

So, now our form field looks like this:

There is not much difference from the above code when it customs to custom validation rules. But, since we don’t want to just hide and show the errors as with other form fields, we want to show text with green font for rules the password has fulfilled, and a red font color for rules not fulfilled. So, our complete code will look like this for checking whether password has a number:

And the same goes for our other password rules:

You can find a demo to play with here and the complete source code for the above project here. Continue reading


Do you really know what unidirectional data flow means in Angular

So if you have a parent component A defined like this in {
controller: class ParentComponent() {
this.value = {name: 'initial'};
},
template: `
b-component obj="$ctrl.value"/b-component
{
bindings: {
obj: '='
},You can see that it has a child B component and the parent A component passes the value to the child B component through obj input binding:
b-component is quite similar to what we would have in Angular:
@Component({
template: `
b-component [obj]="value"/b-component

export class AppComponent {
value = {name: class BComponent {
@Input() obj;The first important thing to understand is that both Angular and AngularJS update bindings during change detection. So when the framework runs change detection for the parent component A it will update the obj property on the child component B:
bComponentInstance.obj = aComponentInstance.value;This process demonstrates one-way data binding or unidirectional data flow from top to bottom. But where AngularJS differ is that it can also update the parent component’s bound value property from the {
controller: function ParentComponent($timeout) {
$timeout(()={
console.log(this.value); // logs {name: 'updated'}
}, 3000)
}—————-
{
controller: function ChildComponent($timeout) {
$timeout(()={
this.obj = { name: 'updated' };
}, 2000)In the code snippet above you can see two timeouts with callbacks — first updates child component property while the second that is executed 1 second later checks if the parent component property has been updated. Angular, by means of change detection, is responsible for reflecting the state of the model in the view.It took me a few days to realize that the parent property update using output binding mechanism:
a-comp (updateObj)="value = $event"/a-compis not performed as part of change detection. Unlike AngularJS there is no code in change detection mechanism in Angular that propagates a child property updates to its parent. Continue reading


An End-to-End AngularJS Guide

  • A Different Angle: What is AngularJS?

Instead of forcing you to search haphazardly, this blog post organizes the content so you can jump directly to the post that you need. The links have been organized into the following sections:

I was very surprised when I started the task of organizing this content to see just how much there is. I hope you find this useful and welcome any and all comments and feedback. Single Page Applications (SPA): Your Browser is the OS

No Need to $watch AngularJS “Controller As”

Using AngularJS to extend Your Code Quality

Using Zone to Trigger Digest Loop for External Functions

I’m not Mocking You, Just Your AngularJS Tests

Build a JavaScript Feed Reader in Under 10 Minutes with AngularJS

Feel free to comment with your favorite links on other sites and blogs as well. Continue reading


Angular Material 7 and CDK News and Updates – The InfoGrid

Since I last covered news on Angular 7, there have been new features added to both Material 7 and CDK. To use this feature, simply import the MatRippleModule from angular material:

And then, add the matRipple directive to the element you want to add the ripple effect feedback:

You can learn more about this feature here and find a demo here. Text Field package is part of Angular CDK and provides a set of utilities for both text and text area inputs. To use this feature, you just need to import TextFieldModule from CDK:

And then, add the cdkAutofill directive to your input control, passing the method to be triggered. To use this feature, simply import the TextFieldModule from CDK:

And then add the directive to your text area input control:

You can learn more about this feature here. Continue reading


The essential difference between Constructor and ngOnInit in Angular

ngOnInit is just a method on a class which structurally is not different to any other method on a class. It’s just that Angular team decided to name it that way but it could have been any other name:
class MyComponent {
ngOnInit() { }
otherNameForNgOnInit() { }
}And it’s completely up to you if you want to implement that method or not on a component class. During compilation Angular compiler checks whether a component has this method implemented and marks the class with an appropriate flag:
export const enum NodeFlags {

OnInit = 1 16,This flag is then used to decide whether to call the method on a component class instance or not during change detection:
if (def.flags NodeFlags.OnInit …) {
constructor in turn is a different thing. Regardless whether you implement it or not in TypeScript class it’s still will be called when creating an instance of a class. This is because a typescript class constructor is transpiled into a JavaScript constructor function:
class MyComponent {
constructor() {
console.log('Hello');
}
}transpiled into
function MyComponent() {
console.log('Hello');
}To create a class instance this function is called with the new operator:
const componentInstance = new MyComponent()So if you omit the constructor in a class, it’s transpiled into an empty function:
class MyComponent { }transpiles into an empty function
function MyComponent() {}That is why I’m saying that a constructor is called regardless whether you implement it or not on a class. Continue reading


How to build wireframes online – MockupTiger wireframe tool

What a wireframe will do is to allow you to view the whole site without getting distracted by details. It's now time to gather your team, stakeholders, and colleagues to get their feedback. Here's why it isn't wise to ignore the wireframe stage:

Wireframes are a way for you and the team to understand clearly what your end goal is – what you want to build. In addition, these tools will allow you to think from the end-user perspective – in other words, what they might be able to experience when they go to your site. Continue reading


Making API calls with the HttpClient service In Angular 5

Notice that we no longer have to ` ` because HttpClient handles this for us

Our Demo service makes the HTTP request and returns the Observable object. To actually get the data from the service, we need to update our component to subscribe to the Observable

The method takes three arguments which are event handlers. In the case of the HTTP request, however, the Observable will usually emit the whole data set in one call. To run the concurrent HTTP requests, let’s add the following code to our service

Notice that forkJoin() takes multiple arguments of type Observable. The onError handler here will run if either of the HTTP requests returns an error code

Next, we subscribe to the new method in our component:

To write data to our API, we need to add several new methods to our DemoService class:

Notice that our createFood(), updateFood(), and deleteFood() methods use API endpoints which return the saved object in JSON format. Continue reading


The Past, Present, and Future of the Angular CLI – Angular Blog

The Past, Present, and Future of the Angular CLI
The Angular CLI is a command-line interface for building Angular applications, and over the last year it has become one of the most essential tools in an Angular developer’s toolbox. npm install —g @angular/cli
ng new my-angular-project
cd my-angular-project
ng serveMoving Quickly
The Angular CLI has made a lot of progress over the last few months, you can view the comprehensive notes about this progress on the releases page, but it can be helpful to look back on what’s happened in the last 4 flag
The minimal flag allows developers to generate a smaller, simpler default project. Now, to keep bundles as small as possible, we extract these licenses into a separate 3rdpartylicenses.txt file and remove any duplicate size improvements
With each release, we work hard to try to improve the quality of the code that the CLI generates with production builds. Learn more about setting up your Angular CLI project to generate server optimzed bundles on the wiki:
Initial Support for early betas of v5
Angular makes major releases approximately every 6 months. Here are a few of the ideas the team hopes to (but doesn’t promise to) include in future releases:
Ahead of Time Compilation mode by default — The Angular team is doing a lot of work to make compilation faster, and once the compiler can achieve a similar level of performance to what we see today, we’ll flip the switch and always build with AOT turned on. Continue reading


Getting to Know the Angular CDK Drag and Drop Feature

cdkDragHandleSortable Example
Adding the cdk-drop around a set of cdkDrag elements groups the draggables into a reorder-able collection. Sortable exampleThe package exposes the moveItemInArray method which on drop rearrange the items array according to the indexes. Sortable demoTransferring Items between Lists
The cdk-drop component supports transferring dragged items between connected drop zones. If the user is dragging an element within the same container, we perform a sortable action; otherwise, we transform the value from one collection to the other using the built-in transferArrayItem() method. ( note that this method mutates the array )

enterPredicate
The enterPredicate input expects a function that is used to determine whether an item is allowed to be moved into a drop container. Continue reading


These React Fundamentals You Skip may be Killing You

Consequently, whenever the props or state values of a component change, a new tree of elements is rendered. However, before React gets to updating the DOM, remember that under the hood — it had first constructed the element tree for the various components and did the essential “diffing” before updating the DOM. The parent component A receives some props and passes them down to the child component D.Now, whenever the prop value in A changes, the entire children elements of A are re-rendered to compute a new element tree. When the parent component receives new Props, every child element is re-rendered and a new tree returned. This is great, but I am concerned about React’s initial rendering of the component element tree. Continue reading


The Top 5 Mistakes AngularJS Developers Make Part 2: Abusing watch

I’ve had to build the controller with $scope because I have to $watch for the changes and the only way to $watch is by having a reference to $scope, right? When the model is mutated (i.e. by the user changing a selection), Angular automatically re-evaluates other properties to determine if the UI needs to be updated. When the user mutates the model by changing the gender, Angular will automatically re-evaluate properties like the gender text to see if it needs to update the UI. Because the gender selection updated the property, Angular will recognize the change and refresh the UI. That keeps your tests simple and ensures they run quickly with little overhead (i.e. “Given controller when the selected gender changes to male then the gender text should be updated to boy.”) Continue reading


Best practices for a clean and performant Angular application

pipe(
map(value = value.item),
take(1)
);4) Isolate API hacks
Not all APIs are bullet proof — sometimes we need to add some logic in the code to make up for bugs in the APIs. pipe(
map(value = value.item)
);6) Clean up subscriptions
When subscribing to observables, always make sure you unsubscribe from them appropriately by using operators like take, takeUntil, etc. subscribe(item = this.textToDisplay = item);After
Using takeUntil when you want to listen to the changes until another observable emits a value:
private destroyed$ = new Subject();public ngOnInit (): void {
iAmAnObservable
. pipe(
map(value = value.item)
// We want to listen to iAmAnObservable until the component is destroyed,
takeUntil(this. subscribe(item = this.textToDisplay = item);
}public ngOnDestroy (): void {
a private subject like this is a pattern to manage unsubscribing many observables in the component. Continue reading


A comparison between Angular and React and their core languages

Angular and ReactOne thing that is really great about React in terms of performance is the Virtual DOM, which you’ve probably heard about a couple of times. So who uses which shop
onefootball
Google Express
NBA
Delta

If you know of any large, well-known companies using Angular, please share with a link.TypeScript and JavaScript (ES6+)
As I mentioned, it can be misleading to only compare Angular and React without focusing on the core language each one has to offer. It is important to notice that TypeScript was released in the period of ES5, and during that time, ES5 was not a class-based OOP language. Alright, so if you are still confused what statically typed means, check this out:
Static typed property
Static typed property comparison between JavaScript and TypeScriptStatic typed argument
Static typed argument comparison between JavaScript and TypeScriptI’ve learned that lots of people believe that a statically typed language means reliable code, and is most often used as a winning argument over dynamically typed languages. Takeaway notes
React handles memory-management efficiently (virtual DOM)
React uses JavaScript (ES6), a recognized web-language since 1995
Angular uses TypeScript, released in 2012
Statically typed languages are great, but does note make code more reliable
Dynamically typed languages require less time to write and more flexibility to use your creativity (fewer typos)
Learning a statically-typed language may be a challenge, especially if you’ve only been working with dynamically typed languages
ES6 has implemented lots of great features such as modules, classes, spread operator, arrow functions, template literals that allows you to write less, cleaner and more structured code (syntactic sugar)
TS is simply ES6+ with typos and more

Conclusion
The framework/component-library you choose may influence how much time you spend programming and your budget. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.