Angular Jobs

Today in Top Angular News – Saturday, November 10

Today in Top Angular News – Saturday, November 10

Today’s topics include angular, applications, typescript, javascript, frontend, webdev, webdevelopment, technology, DesignPatterns, webdeveloper, angular7, angular6, and AngularConnect. Special thanks to contributors @NetanelBasal, Netanel Basal, by Rehmaanali, rehmaanalis, uncle_dallas, @petebd, Pete Bacon Darwin, @mathis.garberg, Mathis Garberg, The serverless webpack authors, @natelapinski, Nate Lapinski, @bob.bumsuk.lee, Bob Lee, 10212426438111935, Lars Gyrup Brink Nielsen, @charleeli, Charlee Li, JavaScript_Plow, NG_Tutorial, talkingdotnet, and echoechojs.


Getting to know the ng-container directive in Angular

  • The second solution is the ng-container directive.
  • The problem is that this force us to add an additional tag.

Getting to know the ng-container directive in Angular
In many cases when working on your app, you forced to wrap your content with an additional tag when using structural directives. Using ngIf to wrap multiple nodes:
In the above example, we are forced to add additional tag because we want to use one ngIf for both s. For example:
But in many cases, we don’t need the additional tag (in this case the ). Continue reading


Part 4 : MEAN APP – Build FrontEnd With AngularJS

  • We will setup view and build a form to interact with our APIs.

The next thing will be doing is making the controller file to make interaction with the Forms. After creating the controller, the next thing will be doing is binding our Bookstore API into forms using AngularJS. After completing the design all you need to run is Node app And the MongoDB server. so just one command in terminal

After that start the MongoDB Server from the command pad. Continue reading


Making Proxy Request In Angular/Fix CORS Issue In Angular Applications

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. If you are not that familiar with CORS read about CORS first then continue with this article. Angular runs on its own server (by default localhost:4200) and webAPI runs on a different port so we get the Cors issue. So, from the above screen, it is clear that WebAPI is running on port 57263 and our application is running on 4599 (it's not running in 4200 as I have changed the port in (here domain is same but the port number is different – one of the rules to satisfy CORS)

So, the solution for the above issue is,

In this article, we will see a detailed explanation on how to use Angular Proxy only. Call the Service from the app.component.ts Here, only the structure and code snippets are shown, you can put it together for a proxy shows. Continue reading


Stable AngularJS and Long Term Support – Angular Blog

Stable AngularJS and Long Term Support
AngularJS is planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long Term Support period. We understand that many developers are still using AngularJS, and that the migration process to Angular takes time and energy, but we also are aware that developers want clarity on the future AngularJS development plans. January 1 — June 30, 2018 AngularJS 1.7 Active Development
July 1, 2018 — June 30, 2021 AngularJS 1.7 LTS Period

All AngularJS applications that work now, will continue to work in the future. AngularJS 1.7 development
After the release of 1.7.0 the team does not intend to merge any feature or fix that will require even a minor breaking change. Continuing the journey
The Angular team and community have benefited so much from the countless people in the community who have provided feedback, bug fixes, new features, educational resources, built amazing libraries, run awesome conferences, and created fantastic applications. Continue reading


Clean Code Checklist in Angular ✔️ – ITNEXT

In an attempt to reduce complexity and help other developers out, I decided to put together a clean code checklist which covers my personal recommendations for writing clean production-ready Angular code. With only a few commands, your able to:
Create a project from scratch
Scaffold components, directives and services
Lint your code
Serve the application
Run unit- and end to end tests

You can find more information about the Angular CLI here. Folder Structure
As the application grows in size, it’s important to have a structure in place that allows for easy management and maintenance of your code base. Inaccurate comments are worse than no comments at all, as stated by anonymous:
Code never lies, comments do.This avoids writing code like this:
// check if meal is healthy or not
if (meal.calories 1000
meal.hasVegetables) {

}And hopefully more like this:
if (meal.isHealthy()) {

}Separation of Concerns
Angular is built around separation of concerns. Separation of concerns is the core of writing clean code in Angular, and uses the following rule-set:
Don’t create more than one component, service, directive per file. Continue reading


Creating a Color Picker Component with Angular

Also, we want to make sure, that the color-picker component is exported, so it can be used outside of the module:

Finally, we import the color-picker module into the app module

and use the color-picker component in the apps' template:

The first thing we are going to create is the vertical slider on the right side of the picker. This method is reading the the color at the selected position and is emitting it using the components color-emitter;

As you can see, this method is using another method called getColorAtPosition. This method is using the canvas context to read out the color at the given position. Based on this hue, the gradients in the draw method have a different color. Also, there are some wrappers…

Of course, we also need to provide the two properties "hue" and "color" in our component class:

Hue is the result of the color-slider, whereas color is the result of the color-palette. Continue reading


Angular Router Series: Pillar 2 — Navigation – Angular In Depth

For our purposes, just know that activated routes are used by both the router and the developer to extract information about the navigation, such as query parameters and components. In the developer console, we can see the events emitted during a navigation to the /users route:

These events are very useful for studying or debugging the router. Navigation Start
events: NavigationStart
In our sample application, the user starts by clicking on the following link:
Navigate to /users, and pass along the query parameters login=1 (see the section on router guards)Whenever the router detects a click on a router link directive, it starts the navigation cycle. URL Matching, and Redirects
events: RoutesRecognized
redirects and matching are steps one and two of the cycleThe router starts by doing a depth-first search through the array of router configurations ( ROUTES in our example), and trying to match the URL /users to one of the path properties in the router configurations, while applying any redirects along the way. Similar to guards, we specify a resolver in the route configuration, using the resolve property:
{ path: 'users', …, resolve: { users: UserResolver } }Once the router has matched a URL to a path, and all guards have passed, it will call the resolve method defined in the UserResolver class to fetch data. Continue reading


Lazy loading offscreen images for Angular ngFor list

I had another use case that I want to lazy load offscreen images — a web app called Our notes allows to create a group and add / delete note with optional image. One other thing I wanted to improve was that the directive registers the API unconditionally whereas in reality note image was optional so for notes with no image the directive doesn’t need to register in first place. OriginaldeferLoad directive declares it’s time to load when an item is intersecting but what if you want to load couple of images ahead of intersecting item so that user doesn’t see loading animation as much as possible? LazyLoadService helps directives communicate each other by providing announceIntersection method to be called by intersecting item and announcedIntersection observable to be subscribed by all directives, it also has loadAheadCount property with default value of 2 which can be overwritten by parent component at creation to control how many images to load ahead of intersecting item. LazyLoadService to defer the API registration timing
optional [url] input to bypass the registration for some performance gain
optional [index] input to control the load timing

The ng-lazy-load library is developed as one of the child project of Our notes app and full source code can be found here. Continue reading


Container Components with Angular – Angular In Depth

Connect the Presentational Component Using Data Bindings
After extracting the application state integration logic, we can — for now — consider the dashboard component a presentational component and assume that it will have a heroes input property as seen in the template of the dashboard container component. Open in new tab.Data Flows Down From the Container Component
Fitting the dashboard feature into the flow diagram of Figure 1, we see how the container component is notified of heroes that it requested from the hero service through an observable. The container component is notified of the emitted hero name which it passes to the hero service and finally updates the persistent state in the container component model. Ideally, our heroes container component should not be managing persistent state itself, but rather rely on the hero service to do so — or the store in an application that uses NgRx Store. If you want to put the heroes state in the hero service where it belongs, you can extract the state management from this container component. Continue reading


In this post we assume a form field configuration like this:
fields: FormlyFieldConfig[] = [
{
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
},
}
];The package versions we are using Validation
ngx-formly has built-in front-end validation and is quite easy to use. The validation function should be:
Paramters: (ctrl: FormControl) , the form control being validated is passed
Return value: boolean, return whether validation is successful

Next, add a validation config to define the error message when validation fails:
validation: {
messages: {
maxlength: 'The max length is 100 characters',
}
},The validation.messages is an object that defines the error message for each validator. So the final form config should look like this:
fields: FormlyFieldConfig[] = [
{
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
},
validators: {
maxlength: ctrl = ctrl.value ctrl.value = 100,
},
validation: {
messages: {
maxlength: 'The max length is 100 characters',
}
},
}
];One special, built-in validator is required. Thus, to make the above example required, you should write:
fields: FormlyFieldConfig[] = [
{
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
required: true,
},
validators: {
maxlength: ctrl = ctrl.value ctrl.value = 100,
required: 'This field is required.' Just like what we have done for the maxlength type error, we add another field to {
messages: {
maxlength: 'The max length is 100 characters',
other: (err, field) = err,
}
},In order to display whatever server returned, instead of using a fixed string as in maxlength, we use a function for other type. Continue reading

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