Angular Jobs

Today in Top Angular News – Monday, November 19

Today in Top Angular News – Monday, November 19

Today’s topics include angular, typescript, angular7, html5, features, keyvaluepipe, and javascript. Special thanks to contributors @NetanelBasal, Netanel Basal, The serverless webpack authors, @stephenfluin, Stephen Fluin, @palmer_todd, Todd Palmer, @maxim.koretskyi, Max Wizard K, anilsingh581, geekstrick, NG_Tutorial, maxim_koretskyi, and ReyesJane37.


Loading External Libraries on Demand in Angular – Netanel Basal

Loading External Libraries on Demand in Angular

In one of my previous articles, I showed how to load ECMAScript modules on demand using the typescript import() function. Although in most cases you can make do by using this functionality, there are still cases where you’ll need to use an old library that doesn’t supports JS modules. A better course of action would be to lazy load this library when the user initiates an action or navigates to a state where the library is required. Create the Directive
We’ll create a directive that will load the ace library from the /assets folder and initialize it. Let’s take a look at the waitForAce() method implementation:
It’s time to leverage the power of RxJS to help us handle three occurrences:
The first request made in order to load the ace library and inject the source code into the page. Continue reading


Creating Angular Desktop Apps with Electron

In this tutorial, we are going to take a look at how to turn any angular application into a native desktop app using electron. Also, you will discover how to use native APIs like the file system from your angular application using electrons IPC methods. This function will create a new electron window to host our angular application. You can also start the application in fullscreen-mode like this:

Next, we need to fill our new browser window with content: Our angular app. This main process is then spawning the second one by opening the browser window, which is the second part of the app and runs our angular application. Continue reading


Version 5.0.0 of Angular Now Available – Angular Blog

The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Angular Universal State Transfer API and DOM Support
You can now more easily share application state between the server side and client side versions of your application. Angular Universal is a project focused on helping developers to perform server side rendering (SSR) of Angular applications. The new HttpClient has gotten some great praise from developers, so we’re now recommending HttpClient for all applications, and deprecating the previous @angular/http library. Forms are a very important part of many applications, and if you have any sort of server side validation, or any heavier processes triggered by validation or value changes that you want to run less often, you can now take control of the validation and value change timing at the control level, or specify it for an entire form. Continue reading


The Angular Library Series – Creating a Library with the Angular CLI

Now that we have a high level view of what our Angular workspace will look like, let’s set some specific goals for this tutorial:
Goals
Use the Angular CLI to create a workspace with the same name as our intended Angular library: example-ng6-lib
We will have a test application for our example-ng6-lib library named:
example-ng6-lib-app
In our example-ng6-lib workspace generate an Angular library named:
example-ng6-lib
Our Angular library will have the prefix of enl to remind us of Example Ng6 Library. ALWAYS: Use a prefix when generating a library.One of the great things about the Angular CLI generate command is that it always tells you what files it affects:
$ ng generate library example-ng6-lib –prefix=enlCREATE (968 bytes)
CREATE (191 bytes)
CREATE (164 bytes)
CREATE (175 bytes)
CREATE (700 bytes)
CREATE (191 bytes)
CREATE (769 bytes)
CREATE (246 bytes)
CREATE (317 bytes)
CREATE (261 bytes)
CREATE (679 bytes)
CREATE (281 bytes)
CREATE (418 bytes)
CREATE (142 bytes)
UPDATE angular.json (4818 bytes)
UPDATE package.json (1724 bytes)
UPDATE tsconfig.json (471 bytes)Here is a quick summary of what the generate library command does:
Adds a new example-ng6-lib project for our library in angular.json
Adds dependencies for ng-packagr to our package.json
Adds a reference to the example-ng6-lib build path in tsconfig.json
Creates sources for our library in this is Angular in Depth let’s actually take an in depth look at each of these items. So, it adds it to our devDependencies in our workspace package.json:
"ng-packagr": "^3.0.0-rc.2",build path in tsconfig.json
When testing example-ng6-lib we want to be able to import it like a library and not just another set of files that are part of our application. You want to import the module in the application using the library by name like this:
import { ExampleNg6LibModule } from 'example-ng6-lib';This works because when importing a library by name, the Angular CLI looks first in the tsconfig.json paths and then in node_modules. ALWAYS: In your test application import using your library by name and NOT the inidual files.Your app.module.ts file should look like this:
Displaying the example-ng6-lib Component
To keep things simple let’s just add the default generated component from our library to our AppComponent template in: src\app\app.component.html
You can just replace the bottom half of the AppComponent template src\app\app.component.html should look like this:
Running Our Application
As always we can run our application using:
ng serveAnd now when we point our browser at:
http://localhost:4200/
we should see the test for our component from our library. Continue reading


How to manually bootstrap an Angular application – Angular In Depth

Let’s define these two components:
import { Component } from selector: 'a-comp',
template: `I am A component/`
})
export class AComponent {}

@Component({
selector: 'b-comp',
template: `I am B component/`
})
export class BComponent {}And we register them in the AppModule:
@NgModule({
imports: [BrowserModule],
declarations: [AComponent, BComponent],
entryComponents: [AComponent, BComponent]
})
export class AppModule {}The important thing here is that we don’t register them in the bootstrap property since we will be bootstrapping them manually. Also, since we don’t know whether A or B component will be used we don’t specify there selectors in the index.html, so it now it looks like this:
body
h1 id="status"
Loading AppComponent content here …
/h1
/bodyNow, if you run the application now you will get the following error:
The module AppModule was bootstrapped, but it does not declare “@NgModule. Later, when we will be ready to bootstrap the application we will use bootstrap method of the ApplicationRef to initialize the root component. Let’s define the custom method bootstrapRootComponent that will be responsible for bootstrapping the root component when it becomes available:
// app – reference to the running application (ApplicationRef)
// name – name (selector) of the component to bootstrapfunction bootstrapRootComponent(app, name) { // define the possible bootstrap components
// with their selectors (html host elements) const options = {
'a-comp': AComponent,
'b-comp': BComponent
}; // obtain reference to the DOM element that shows status
// and change the status to `Loaded` const statusElement = statusElement.textContent = 'Loaded'; // create DOM element for the component being bootstrapped
// and add it to the DOM const componentElement = document.createElement(name);
// bootstrap the application with the selected component const component = options[name];
app.bootstrap(component);
}It takes the reference to the ApplicationRef and the name of the component to bootstrap. I’ve also created a mock fetch function that emulates HTTP request to the server and returns b-comp selector within 2 seconds:
function fetch(url) {
return new Promise((resolve) = {
setTimeout(() = {
resolve('b-comp');
}, 2000);
});
}So now that we have our bootstrap function that will bootstrap the root component let’s use it in the ngDoBootstrap method of the module:
export class AppModule {
ngDoBootstrap(app) {
. Continue reading

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