Content Source:
- blog.angular.io
The function-like HTML segment refers to a block of HTML with the ability to accept context variables (in other words, parameters). A typical Angular component has two major parts of logic, a HTML template and a Typescript class. The capability to utilize this kind of function-like HTML segment is essential for a good shared component. It is because a shared component with only a fixed HTML template is very difficult to fit all the needs among all different use cases. Trying to satisfy all potential use cases with a single and fixed HTML template will usually end up with a large template with lots of conditional statements (like *ngIf), which is painful to read and maintain.
Here we would like to explain with an example, about how we can utilize TemplateRef to define function-like HTML segments for communication between templates, which is a good solution to deal with the large template problem.
Assume that there is a shared component DataListComponent, which takes an array of data and displays them in the view:
export interface DataTableRow { dataType: string; value: any; } @Component({ selector: 'data-list', template: ` <div *ngFor="let row of data" [ngSwitch]="row.dataType"> <div *ngSwitchCase="'string'">{{row.value}}</div> <div *ngSwitchCase="'number'"># {{row.value | number}}</div> <div *ngSwitchCase="'date'">{{row.value | date}}</div> </div> ` }) export class DataListComponent { @Input() data: DataTableRow[] = []; }
It understands only three types of data now, which are string, number and date. When we want to add more types to it, the easiest way is to simply add more switch cases. It is totally fine when such new types are generic enough that have universal representations. Yet, for data that is depending on the users, adding more switch cases can make the code very dirty.
Say we want to add the new type boolean which displays true/false in FirstComponent, yes/no in SecondComponent. If we simply go for the more-switch-cases solution, it may have something like this:
<div *ngSwitchCase="'boolean-firstComponent'"> {{ row.value ? 'true' : 'false }} </div> <div *ngSwitchCase="'boolean-secondComponent'"> {{ row.value ? 'yes' : 'no}} </div>
This approach is bad as the shared component now contains component-specific logic. Besides, this block of code is going to expand really fast when there are more new use cases in the future, which will soon become a disaster. Ideally, we want to pass HTML segments from the parents, so that we can keep those specific logic away from the shared component.
@Component({ template: ` <data-list [data]="data"> <!-- component specific logic to display true/false --> </data-list> `, ... }) export class FirstComponent {...} @Component({ template: ` <data-list [data]="data"> <!-- component specific logic to display yes/no --> </data-list> `, ... }) export class SecondComponent {...}
The logic behind is actually very straight forward. First, we need to define templates with context in the user components:
@Component({ template: ` <data-list [data]="data"> <ng-template let-value="value"> {{value ? 'true' : 'false'}} </ng-template> </data-list> `, ... }) export class FirstComponent {...} @Component({ template: ` <data-list [data]="data"> <ng-template let-value="value"> {{value ? 'yes' : 'no'}} </ng-template> </data-list> `, ... }) export class SecondComponent {...}
Next, we add the logic to read and present the template segment inside the shared component:
@Component({ selector: 'data-list', template: ` <div *ngFor="let row of data" [ngSwitch]="row.dataType"> <div *ngSwitchCase="'string'">{{row.value}}</div> <div *ngSwitchCase="'number'"># {{row.value | number}}</div> <div *ngSwitchCase="'date'">{{row.value | date}}</div> <div *ngSwitchCase="'boolean'"> <ng-container *ngTemplateOutlet="rowTemplate; context:{ value: row.value }"></ng-container> </div> </div> ` }) export class DataListComponent { @Input() data: DataTableRow[] = []; @ContentChild(TemplateRef) rowTemplate: TemplateRef<any>; }
Now we have a shared component which is capable to interpret a HTML segment from the outside. Yet, it is still not ideal. What if we have more than one templates?
This one is more tricky. Although TemplateRef is capable of parsing context, it doesn’t have a name or ID that we can rely on to distinguish multiple templates from each other programmatically. As a result, we need to add a wrapper component on top of it when we have more than one templates, so that we can add identifiers.
@Component({ selector: 'custom-row-definition', template: '' }) export class CustomRowDefinitionComponent { @Input() dataType: string; @ContentChild(TemplateRef) rowTemplate: TemplateRef<any>; }
Instead of directly retrieving the TemplateRef in the shared component, we retrieve the wrapper:
@Component({ selector: 'data-list', template: ` <div *ngFor="let row of data" [ngSwitch]="row.dataType"> <div *ngSwitchCase="'string'">String: {{row.value}}</div> <div *ngSwitchCase="'number'"># {{row.value | number}}</div> <div *ngSwitchCase="'date'">{{row.value | date}}</div> <ng-container *ngFor="let def of customRowDefinitions"> <ng-container *ngSwitchCase="def.dataType"> <ng-container *ngTemplateOutlet="def.rowTemplate; context:{ value: row.value }"></ng-container> </ng-container> </ng-container> </div> ` }) export class DataListComponent { @Input() data: DataTableRow[] = []; @ContentChildren(CustomRowDefinitionComponent) customRowDefinitions: QueryList<CustomRowDefinitionComponent>; }
(Having multiple ng-container together with structural directives may cause performance issue potentially, but it is not the main point of this article, so we leave it there for simplicity.)
In this example, we use the dataType property inside the wrapper as identifiers for the templates. As a result, we can now define multiple templates with different dataType.
@Component({ selector: 'app-root', template: ` <data-list [data]="data"> <custom-row-definition dataType="array"> <ng-template let-value="value"> {{value.join(' - ')}} </ng-template> </custom-row-definition> <custom-row-definition dataType="money"> <ng-template let-value="value"> $ {{value | number}} </ng-template> </custom-row-definition> </data-list> ` }) export class AppComponent { data: DataTableRow[] = [ { dataType: 'string', value: 'Row 1' }, { dataType: 'number', value: 500 }, { dataType: 'date', value: new Date() }, { dataType: 'array', value: [1, 2, 3, 4] }, { dataType: 'money', value: 200 } ] }
Some may ask why don’t we just use ng-content with name to project the content from the outside? The major difference is the capability to have context (parameters). ng-content is like a function without parameters, which cannot achieve real mutual communication between templates. It is like a one-way channel to merge some HTML segments from the outside, but no real interaction with the template inside. It won’t be able to achieve use cases like the example above.
For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.
Content Source:
Version 10.0.0 is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. This release is smaller than typical; it has only been few months since we released version 9.0 of Angular.
We try to release two major versions each year to keep Angular synchronized with the rest of the JavaScript ecosystem and to have a predictable schedule. We plan to release version 11 this fall.
New Date Range Picker
Angular Material now includes a new date range picker.
Image of the new date range picker. Pic courtesy: blog.angular.io
To use the new date range picker, you can use the mat-date-range-input
and mat-date-range-picker
components.
Warnings about CommonJS imports
When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.
Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.
CommonJS or AMD dependencies can cause optimization bailouts. Pic courtesy: blog.angular.io
Optional Stricter Settings
Version 10 offers a more strict project setup when you create a new workspace with ng new
.
ng new --strict
Enabling this flag initializes your new project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your app. Specifically, the strict
flag does the following:
any
Keeping Up to Date with the Ecosystem
As usual, we have made a few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.
We’ve also updated our project layout. Starting with version 10 you will see a new tsconfig.base.json
. This additional tsconfig.json
file better supports the way that IDEs and build tooling resolve type and package configurations.
New Default Browser Configuration
We’ve updated the browser configuration for new projects to exclude older and less used browsers.
v9 Defaults
Pic courtesy: blog.angular.io
v10 Defaults
Pic courtesy: blog.angular.io
This has the side effect of disabling ES5 builds by default for new projects. To enable ES5 builds and differential loading for browsers that require it (such as IE or UC Browser), simply add the browsers you need to support in the .browserslistrc
file.
Angular Team Fixit
We’ve dramatically increased our investment in working with the community. In the last three weeks our open issue count has decreased by over 700 issues across framework, tooling, and components. We’ve touched over 2,000 issues, and we plan to make large investments over the next few months, working with the community to do even more.
Deprecations and Removals
We’ve made several new deprecations and removals from Angular.
The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running yarn
or npm install
for Angular packages and libraries. These formats are no longer needed as any downleveling to support ES5 is done at the end of the build process.
Based on heavy consultation with the community, we are deprecating support for older browsers including IE 9, 10, and Internet Explorer Mobile.
You can read more about our deprecations and removals.
Visit update.angular.io for detailed information and guidance. To have the best update experience, we recommend always upgrading one major release at a time.
To update:
ng update @angular/cli @angular/core
For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.
Content Source:
In this article, you’re going to see how to set up Jenkins from scratch and create and run an Angular pipeline — all in about five minutes. Don’t worry if you’re not familiar with Angular. The same principles hold for Vue, React, Python, Java, and other languages. So get comfy because we’re about to start.
The structure of the article will be as follows:
If you’re already familiar with Jenkins, feel free to skip this part.
In this section, we’ll go over the installation steps for macOS and Linux as shown on the Jenkins website. You can also find information on getting started on a Windows machine.
First, let’s create a network for Jenkins:
docker network create jenkins
Add two volumes to share Docker client TLS certificates and persist Jenkins data. This way, no data is lost when you shut down your PC or server, for example. Keep in mind that if you do remove these volumes, data will be lost permanently.
docker volume create jenkins-docker-certs docker volume create jenkins-data
The following four commands bring the Docker container up:
docker image pull docker:dind docker container run --name jenkins-docker \ --restart unless-stopped \ --detach \ --privileged --network jenkins \ --network-alias docker \ --env DOCKER_TLS_CERTDIR=/certs \ --volume jenkins-docker-certs:/certs/client \ --volume jenkins-data:/var/jenkins_home \ --publish 2376:2376\ docker:dind docker image pull jenkinsci/blueocean docker container run --name jenkins-blueocean \ --restart unless-stopped \ --detach \ --network jenkins \ --env DOCKER_HOST=tcp://docker:2376 \ --env DOCKER_CERT_PATH=/certs/client \ --env DOCKER_TLS_VERIFY=1 \ --volume jenkins-data:/var/jenkins_home \ --volume jenkins-docker-certs:/certs/client:ro \ --publish 8080:8080 \ --publish 50000:50000 \ jenkinsci/blueocean
Jenkins is now running on http://localhost:8080, but you have to do one more tricky step: You have to unlock Jenkins. The initial password can be found inside a folder of the Jenkins CI blue ocean Docker container. I’ll show you how to retrieve this. When you try this yourself, make sure you specify the right docker UUID.
docker container ps 4ec29afb280f jenkinsci/blueocean 1ce11b131265 docker:dind docker container exec 4ec29afb280f cat /var/jenkins_home/secrets/initialAdminPassword bd95aa5131a142b690795fa9427287a8
In the next step, you can configure the plug-ins you want to install. I’ll leave that up to you. I installed the Cobertura (for Java) and Locale plug-ins and got rid of Subversion. After they are installed, you have to create an admin user.
In the last step, you have to set a Jenkins URL (e.g. http://localhost:8080), but I did not bother to change it. In the end, Jenkins restarts and is completely installed. That took us literally only a couple of minutes.
The Jenkins user interface. Pic courtesy: medium.com
Let’s face it, there are tons of possible ways to define a great pipeline. This will only be a simple example. It would be great to hear if you have suggestions for an improved pipeline. Don’t hesitate to leave a comment at the end of the article!
First of all, it’s important to specify a base Docker image to run our commands. At the time of writing, using the latest node Docker image felt like a good choice.
Next, we specify the stages to go over. In this configuration, the most recognizable development stages are specified:
Feel free to add additional steps. At this point, you have so much freedom. Deploy automatically or publish a Docker image that can be rolled out to a limited amount of users. That choice is yours. To conclude this section, let me share the pipeline with you. Put this inside a Jenkinsfile (no extension) in the root folder of your project:
pipeline { agent { docker { image 'node:latest' } } stages { stage('Install') { steps { sh 'npm install' } } stage('Test') { parallel { stage('Static code analysis') { steps { sh 'npm run-script lint' } } stage('Unit tests') { steps { sh 'npm run-script test' } } } } stage('Build') { steps { sh 'npm run-script build' } } } }
Open Jenkins on http://localhost:8080 and create a new item. No need to do a lot here, actually. Let’s create a “Multibranch Pipeline.”
Create a Pipeline menu. Pic courtesy: medium.com
A new menu opens. Here, you can add a description among many other things, but we’ll only cover the most important parts in this article. You should look for the section called “branch sources” and select Git. The next thing to do is pass in a project repository (e.g. https://github.com/user/project-name.git) and your credentials. That is sufficient.
Let’s add one more thing to make it an automatic pipeline. Let’s poll the GitHub repository for changes. Enable “Scan Multibranch Pipeline Triggers” and pass a reasonable interval. This will trigger a build (e.g. every minute) only when there are source code changes. That way, builds get triggered automatically. If one minute is too intensive, you can always lower the interval to check for changes later on.
Now go to http://localhost:8080/blue/organizations/jenkins/pipelines and run your first job if it’s not already running. Let me show you how this looks:
The pipeline was successful! Pic courtesy: medium.com
For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop web application using Angular, please visit our technology page.
Content Source:
This is a minor release of the framework and the CLI that is a drop-in replacement for 9.0 containing new features and bug fixes.
Today, the Angular libraries you use are made compatible with the Ivy compiler via our ngcc
tool. Previously, the ngcc
compilation pass covered all of your Angular library dependencies sequentially. In 9.1, we’ve improved the speed of ngcc
, and allowed it to compile multiple packages concurrently.
These changes will help make builds faster and improve reliability for teams with monorepository-style workspace layouts.
We’ve added support for TypeScript 3.8, in addition to our existing support for 3.6 and 3.7.
This release adds many great features to the TypeScript language, including:
Angular components are displayed inline
by default, as that’s the default for most DOM elements. It’s very common for developers to want components to use the display: block
style. When you create a new component, you can now set this up automatically.
ng generate component my-component --displayBlock
To turn this on by default, set the schematics.@schematics/angular:component.displayBlock
key in your angular.json
to true, or use:
ng config schematics.@schematics/angular:component.displayBlock true
When running end-to-end tests, we now pass the grep
and invertGrep
options to the Protractor builder, allowing you to more easily choose the test you want to run.
ng e2e --grep searchTerm
If you use VSCode and our Language Service Extension, starting today our extension will allow your IDE to syntax highlight expressions in your templates, using a TypeScript-like formatter. It will also add syntax highlighting to your inline HTML templates in your components.
pic courtesy : blog.angular.io
Note: We worked with the authors of angular2-inline and vscode-angular-html on these features. If you use either of these extensions, you’ll need to disable them for this functionality to work.
If you build an application with Internationalization, you may be building a single app that supports Right to Left locales. You can now query for the current direction at runtime.
import { getLocaleDirection, registerLocaleData } from '@angular/common'; import { LOCALE_ID } from '@angular/core'; import localeAr from '@angular/common/locales/ar'; ... constructor(@Inject(LOCALE_ID) locale) { getLocaleDirection(locale); // 'rtl' or 'ltr' based on the current locale registerLocaleData(localeAr, 'ar-ae'); getLocaleDirection('ar-ae'); // 'rtl' // Now use the current direction in your app. // You can conditionally specify an image URL for example }
Newly created projects will now use TSLint 6.1 by default. If you want to migrate to the latest version, make sure you are on version 9.1 first, then you can opt-in via:
ng update @angular/cli --migrate-only tslint-version-6
We do not run this migration automatically because there are some minor breaking changes in TSLint 6.1.
This release includes lots of other bug fixes, performance improvements, and minor features. Version 9.1 also improves the compatibility story with our new compiler and runtime. If you previously attempted to enable Ivy with version 9.0 and ran into issues, try again with version 9.1.
Update to the latest version of Angular to get access to these new capabilities and bug fixes.
ng update @angular/cli @angular/core
For more information and to develop web application using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop any custom web apps using Angular, please visit our technology page.
Content Source:
The 9.0.0 release of Angular is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI.
Version 9 moves all applications to use the Ivy compiler and runtime by default. In addition to hundreds of bug fixes, the Ivy compiler and runtime offers numerous advantages:
Here’s a breakdown of some of the more notable improvements.
The Ivy compiler has been designed to remove parts of Angular that aren’t being used via tree-shaking and to generate less code for each Angular component.
With these improvements, small apps and large apps can see the most dramatic size savings.
Small apps could see around a 30% decrease in bundle size, large apps will see a 25–40% decrease, and medium apps decrease minimally. – pic courtesy: blog.angular.io
We have also revamped the implementation of TestBed in Ivy to make it more efficient.
Previously, TestBed would recompile all components between the running of each test, regardless of whether there were any changes made to components (for example, through overrides).
In Ivy, TestBed doesn’t recompile components between tests unless a component has been manually overridden, which allows it to avoid recompilation between the grand majority of tests.
With this change, the framework’s core acceptance tests are about 40% faster. We would expect users to see their own application test speeds to be around 40–50% faster.
Ivy provides you with more tools to debug your applications. When running an application in Dev Mode with the Ivy runtime, we now offer the new ng object for debugging.
pic courtesy: blog.angular.io
Ivy also improves the stack trace for debugging issues such as the ExpressionChangedAfterItHasBeenCheckedError. Previously the stack trace could be unhelpful:
pic courtesy: blog.angular.io
With Ivy, you see a more useful stack trace that allows you to jump directly to the template instruction with the expression that has changed.
pic courtesy: blog.angular.io
For example, if you click on AppComponent_Template in the stack trace above, you can see the specific line in the generated code where the error is being thrown:
If you’re so inclined, you can also step into any of these framework instructions to walk through how the framework creates or updates your components.
The Ivy compiler and runtime provides improvements for handling styles. Previously, if an application contained competing definitions for a style, those styles would destructively replace each other. With Ivy, the styles are merged in a predictable way.
Consider the following template and component snippets:
<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>
@Component({ host: { style: "color:blue" },... }) ... @Directive({ host: { style: "color:black", "[style.color]": "property" },... }) ...
Previously, whichever binding was evaluated last would win, and this could depend on the timing of changes to these expressions. If myColor and myOtherColor both were undefined, the static ‘red’ style would be ignored.
With version 9, you can manage your styles through a clear, consistent order of precedence that isn’t dependent on timing. The most specific styles always have the highest precedence. For example, a binding to [style.color] overrides a conflicting binding to [style].
However, for backwards compatibility reasons, we have left [ngStyle] and [ngClass] bindings behavior the same as before. When their binding values are updated, the new values will override any competing bindings.
You can read more about styling precedence rules in the Template Syntax guide in the documentation.
As a side effect of the styling refactoring, you can now also bind to CSS custom properties (also known as CSS variables).
<div [style.--main-border-color]=" '#CCC' "> <p style="border: 1px solid var(--main-border-color)">hi</p> </div>
Thanks to Ivy’s new architecture, we’ve made significant improvements to the compiler’s performance.
We measure our compiler’s performance in terms of the overhead on top of a plain TypeScript compilation of an application. For our documentation app (angular.io), this overhead decreased from 0.8x to 0.5x with Ivy, an improvement of nearly 40%.
These improvements mean that AOT builds can be noticeably faster. Thanks to this speedup, for the first time ever we’re using AOT even for dev-mode builds. This means that `ng serve` now benefits from the same compile-time checking as production builds, significantly improving the developer experience for Angular.
Thanks to the changes in the compiler and runtime, we also no longer require entryComponents. These components will be discovered and compiled automatically by their usage.
For more information and to develop your web apps using Angular, Hire Angular Developer from us as we provide you high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Angular, please visit our technology page.
Content Source:
First off, let’s go over what Capacitor is and how it relates to other cross platform projects out there.
At a glance, Capacitor follows many of the same ideas as Apache Cordova.
pic courtesy: blog.angular.io
There is a Web layer that renders the app and a native layer that listens for calls to Native APIs. Within those layers are many technical decisions that make the overall developer and user experience much smoother.
npm
and modern JS tooling to simplify adding core plugins and creating new ones.These principles bring the best of web development and native development with little to no friction for developers.
Capacitor itself is made up of 2 packages, the core functionality (@capacitor/core)
and the CLI (@capacitor/cli)
. To add Capacitor to your project, let’s start with a simple Angular App from the Angular CLI.
ng new capApp --routing --style css cd capApp
With the app created, let’s add Capacitor to our project.
ng add @capacitor/angular
With this, developers can add Capacitor to their project with ease.
pic courtesy: blog.angular.io
When the schematic is done running, developers should build our app, and run npx cap add <ios,android>
or yarn cap add <ios, android>
and our Xcode or Android Studio projects will be created!
ng run capApp:build npx cap add ios
First, it adds Capacitor dependencies to the package.json
: Core and CLI.
This will just do a quick npm (or yarn) install then make sure we have the Core and CLI packages for Capacitor.
To make sure that the Capacitor project understands your Angular project, the schematic infers a lot of data based on your angular.json. It will read your app’s name and use that when creating the iOS and Android projects, as well as read the build folder so it knows where to copy your web code when preparing the native projects. This means that your Capacitor project will feel like a natural extension of your Angular project.
Once added, we do a build of our app, and deploy to either iOS, Android, web, or Electron. For building to iOS or Android, you’ll need to have the native SDKs and tools installed.
For more Information and to build the website using Angular, Hire Angular Developer from us as we give you high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Angular, please visit our technology page.
Source:
In Our Previous Post about to build the role-based Api with Firebase, we had covered the Role-based Auth, Firebase, Building API and Creating a Firebase HTTP Function. Let’s move on the remaining part of it with this post.
Great! Now that we have our written the role-based API, we can deploy it to the web and start using it. Deploying with Firebase is super easy, we just need to run firebase deploy
. Once the deploy is completed, we can access our API at the published URL.
pic courtesy: toptal.com
pic courtesy: toptal.com
Once our API is deployed, we have several ways to use it—in this tutorial, I’ll cover how to use it via Postman or from an Angular app.
If we enter the List All Users URL (/api/users)
on any browser, we’ll get the following:
pic courtesy: toptal.com
The reason for this is when sending the request from a browser, we are performing a GET request without auth headers. These means our API is actually working as expected!
Our API is secured via tokens—in order to generate such a token, we need to call Firebase’s Client SDK and log in with a valid user/password credential. When successful, Firebase will send a token back in the response which we can then add to the header of any following request we want to perform.
In this tutorial, I’ll just go over the important pieces to consume the API from an Angular app. The full repository can be accessed here, and if you need a step-by-step tutorial on how to create an Angular app and configure @angular/fire to use, it you can check this post.
So, back to signing in, we’ll have a SignInComponent
with <form>
to let the user enter a username and password.
//... <form [formGroup]="form"> <div class="form-group"> <label>Email address</label> <input type="email" formControlName="email" class="form-control" placeholder="Enter email"> </div> <div class="form-group"> <label>Password</label> <input type="password" formControlName="password" class="form-control" placeholder="Password"> </div> </form> //...
And on the class, we signInWithEmailAndPassword
using the AngularFireAuth
service.
//... form: FormGroup = new FormGroup({ email: new FormControl(''), password: new FormControl('') }) constructor( private afAuth: AngularFireAuth ) { } async signIn() { try { const { email, password } = this.form.value await this.afAuth.auth.signInWithEmailAndPassword(email, password) } catch (err) { console.log(err) } } //..
At this point, we can sign in to our Firebase project.
pic courtesy: toptal.com
pic courtesy: toptal.com
And when we inspect the network requests in the DevTools, we can see that Firebase returns a token after verifying our user and password.
This token is the one we will use to send on our header’s request to the API we’ve built. One way to add the token to all requests is using an HttpInterceptor
.
This file shows how to get the token from AngularFireAuth
and add it to the header’s request. We then provide the interceptor file in the AppModule.
@Injectable({ providedIn: 'root' }) export class AuthTokenHttpInterceptor implements HttpInterceptor { constructor( private auth: AngularFireAuth ) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return this.auth.idToken.pipe( take(1), switchMap(idToken => { let clone = req.clone() if (idToken) { clone = clone.clone({ headers: req.headers.set('Authorization', 'Bearer ' + idToken) }); } return next.handle(clone) }) ) } } export const AuthTokenHttpInterceptorProvider = { provide: HTTP_INTERCEPTORS, useClass: AuthTokenHttpInterceptor, multi: true }
@NgModule({ //.. providers: [ AuthTokenHttpInterceptorProvider ] //... }) export class AppModule { }
Once the interceptor is set, we can make requests to our API from httpClient
. For example, here’s a UsersService
where we call the list all users, get the user by its ID, and create a user.
//… export type CreateUserRequest = { displayName: string, password: string, email: string, role: string } @Injectable({ providedIn: 'root' }) export class UserService { private baseUrl = '{your-functions-url}/api/users' constructor( private http: HttpClient ) { } get users$(): Observable<User[]> { return this.http.get<{ users: User[] }>(`${this.baseUrl}`).pipe( map(result => { return result.users }) ) } user$(id: string): Observable<User> { return this.http.get<{ user: User }>(`${this.baseUrl}/${id}`).pipe( map(result => { return result.user }) ) } create(user: CreateUserRequest) { return this.http.post(`${this.baseUrl}`, user) } }
Now, we can call the API to get the user by its ID and list all users from a component like this:
//... <ul *ngIf="user$ | async; let user" class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> <div> <h5 class="mb-1">{{user.displayName}}</h5> <small>{{user.email}}</small> </div> <span class="badge badge-primary badge-pill">{{user.role?.toUpperCase()}}</span> </li> </ul> <ul *ngIf="users$ | async; let users" class="list-group"> <li *ngFor="let user of users" class="list-group-item d-flex justify-content-between align-items-center"> <div> <h5 class="mb-1">{{user.displayName}}</h5> <small class="d-block">{{user.email}}</small> <small class="d-block">{{user.uid}}</small> </div> <span class="badge badge-primary badge-pill">{{user.role?.toUpperCase()}}</span> </li> </ul> //...
//... users$: Observable<User[]> user$: Observable<User> constructor( private userService: UserService, private userForm: UserFormService, private modal: NgbModal, private afAuth: AngularFireAuth ) { } ngOnInit() { this.users$ = this.userService.users$ this.user$ = this.afAuth.user.pipe( filter(user => !!user), switchMap(user => this.userService.user$(user.uid)) ) } //...
And here’s the result.
pic courtesy: toptal.com
Notice that if we sign in with a user with role=user,
only the Me section will be rendered.
pic courtesy: toptal.com
And we’ll get a 403 on the network inspector.
pic courtesy: toptal.com
Postman is a tool to build and make requests to APIs. This way, we can simulate that we are calling our API from any client app or a different service.
What we’ll demo is how to send a request to list all users.
pic courtesy: toptal.com
Next, on the tab authorization, we choose Bearer Token and we set the value we extracted from Dev Tools previously.
pic courtesy: toptal.com
pic courtesy: toptal.com
Hire Angular Developer from us, as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Angular, please visit our technology page.
Content Source:
There are many prototyping tools in the marketplace today, and Angular isn’t one that usually comes to mind. We chose Angular for a few reasons:
A Search prototype that didn’t serve up real results wouldn’t be very convincing to the user. However, we didn’t have time to write a functional search API or connect to one either. Instead, we went with a useful trick learned.
We created a spreadsheet and filled it with rows of search results. A benefit of using Sheets was that it provided a user-friendly interface for populating data. Then, with some custom Apps Script, We pushed all edits to a Firebase Realtime Database (step-by-step guide here). Finally, we wired up the Material autocomplete component to read from the database with AngularFire.
pic courtesy: blog.angular.io
We used Firebase Hosting to deploy the prototype to a publicly accessible URL. Once uploaded, we used that link to run remote user testing sessions over a video conference call. One of the benefits of a hosted prototype is that you can let your users interact with the prototype on their own while you observe their screen.
pic courtesy: blog.angular.io
With Google Analytics, We were able to add custom events tracking to see how users were interacting with prototype. This allowed us to see what users were searching for in real time. With this data, we were able to iterate Our category structure and test whether that had an impact on our click-through rates.
pic courtesy: blog.angular.io
Hire Angular Developer from us, as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Angular, please visit our technology page.
Content Source:
March and April have come and gone without a final Angular 8 release, so we’re now past the Angular team’s original target ship date. Many Angular developers were expecting a final release during ng-conf. There was also plenty of exciting Angular news revealed during the conference, including an extended roadmap of what to expect in Angular 9. The ng-conf team has already posted all of the conference sessions on YouTube.
We’ve already seen several Angular 8 beta releases, and we can expect to see several more before the framework’s final release.
With a new release on the way, it’s important to understand what changes are in store so you’ll be able to determine how to approach Angular 8. Since Angular 7 is going to be supported until April of 2020, you may decide that it’s not worth upgrading if Angular 7 already meets all of your needs.
The Angular team has announced that they’re going to be including Ivy in Angular 8 as an opt-in preview. Many Angular developers were hoping for a final release of Ivy, but that’s not what we’re getting in this release. A preview is a lot better than no view. Trying out the preview will let you see how well your current Angular applications work – or don’t work – with Ivy.
If you’re not familiar with Ivy, is it something you should care about? If the user experience of your apps is important to you, then Ivy is definitely something you should care about. Although the framework has made huge improvements in file size and runtime speed since the days of Angular 2, Angular apps often tend to be on the heavy side when it comes to file size and memory use.
Ivy aims to change this. Compared with the current Angular View Engine, Ivy provides the following benefits:
On top of all this, Angular Ivy aims to be broadly compatible with existing Angular applications, so ideally, you’ll be able to get all of Ivy’s benefits without having to change your apps at all. There will be some bugs and hiccups, though. That’s why it’ll be helpful to try building your current Angular apps using Angular 8 and Ivy.
So, if your Angular app supports multiple languages and/or uses server-side rendering, don’t expect it to be ready to work with Ivy just yet. One other trouble spot some users have encountered has been Angular Material. Apps using Angular Material don’t seem to play well with Ivy, as of the latest Angular 8 beta. Keep this in mind when experimenting with Angular 8 (although eventually Angular Material will undoubtedly be updated to work well with Ivy).
Outside of Ivy, there are a few other changes to look forward to in Angular 8. One of the most important changes is what the Angular team describes as ‘Differential Loading of Modern JavaScript.’ To put it simply, this means that new apps generated by Angular CLI will now contain separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+). This is great news because it means that modern browsers with ES2015 support will be able to download smaller, more efficient app bundles that load and render faster than before.
The Angular team is also adding a backward compatibility mode to the Angular router which will make it easier to upgrade legacy Angular apps to modern Angular. In an ideal world, we would have all been able to upgrade our Angular 1.x apps to Angular 2+ right away.
In the real world though, this doesn’t always happen. To this day, there are a large number of massive legacy Angular apps happily chugging away, serving businesses and making users happy. They haven’t been upgraded for a simple reason: they’re working well, and there wouldn’t be much ROI in doing a complete rewrite.
A small, but welcome new feature in Angular 8 will be improved support for bundling web workers with the Angular CLI. This is great news for front-end developers because prior to web workers, our applications were limited to using a single thread.
There’s one catch with web workers: the code that runs in the worker can’t be in the same JavaScript file as the rest of your application. It must be separate. This tends to work poorly with tools like the Angular CLI that want to automatically bundle up your JavaScript into as few files as possible. The improvements to Angular CLI’s web worker bundling in Angular 8 will get rid of this awkwardness and set you on the path to fully parallelized web worker happiness.
The Angular CLI will be gaining another new feature: opt-in usage sharing. This will give you the opportunity to opt-in to sharing telemetry about your Angular CLI usage with the Angular team. I’ve got to applaud the Angular team for approaching this the right way.
Finally, Angular 8 is going to include updates to the latest and greatest versions of Angular’s dependencies, which include tools like RxJS and TypeScript. Although this might seem like a tiny improvement, it’s also a welcome one. Keeping up with TypeScript, in particular, is great because the TypeScript team always seems to pack useful new features into every release.
As we’ve seen, the additions to Angular 8 aren’t huge outside of Ivy. Although they’re absolutely nice to have, they certainly aren’t critical for most applications. More importantly, upgrading to Angular 8 will enable you to ensure your apps are ready for Ivy. Although Ivy is only an opt-in preview in Angular 8, the time to start checking for Ivy compatibility is now.
For more Information and to build the website using Angular, Hire Angular Developer from us as we give you high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Angular, please visit our technology page.
Content Source:
When necessary, a Gauge Chart or Speedometer Chart can be great in visualizing data. But how do we implement it in Angular 6?
Recently we have done a little research to find suitable Gauge chart components in Angular 6. We tried out 3 free chart component libraries, they are:
ngx-gauge@1.0.0-beta.4 angular-google-charts@0.1.2 angular-highcharts
Although all three can produce nice looking Gauge charts, the features provided are quite different, and of course, they all have their strengths and limitations.
This is the first component that I tested as it appeared on very top of the google search results.
pics courtesy: medium.com
It is a simple and good looking component with basic features. It is easy to install and use, simply follow the instructions at github. One feature to highlight is the “Threshold color Range”, it can define a “thresholdConfig” property as below, thus the color will change depending on the data value.
We created sample in stackblitz to demo this feature.
thresholdConfig = { '0': {color: 'green'}, '40': {color: 'orange'}, '75.5': {color: 'red'} };
The shortcoming of this component is that it does not support some of the common features like plotting color bands or dial arrows. Unfortunately, the color bands are a must have for my project, so different components must be used.
Angular Google charts is wrapper of the Google Charts library for Angular 6+. Google Charts is a powerful data tool which includes a rich gallery of interactive charts.
pics courtesy: medium.com
To setup the Gauge chart in angular, first install the package
npm install angular-google-charts
Then import it into app.module.ts
imports: [ ... GoogleChartsModule.forRoot(), ... ],
In the component that consume the chart
<google-chart #googlechart [title]="chart.title" [type]="chart.type" [data]="chart.data" [options]="chart.options"> </google-chart> @ViewChild('googlechart') googlechart: GoogleChartComponent; chart = { type: 'Gauge', data: [ ['Memory', 50], ['CPU', 99] ], options: { width: 400, height: 120, greenFrom: 0, greenTo: 75, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 } };
We wrap up the above code into a stackblitz project for your reference.
While the gauge is very configurable and supports three color sections (green, yellow and red), the colors can not be customized and it does not support additional colors. It may not be a issue for a typical use case, but our project requires specific colors and more than just three colors. So the search continues.
It is a wrapper for very popular high charts js charting library based on SVG. While highcharts is extremely feature rich, the large number of properties also makes the component a bit confusing for a developer new to this library.
pics courtesy: medium.com
The installation and setup for Gauge chart using the angular-highcharts is not very straightforward, but once it is setup, it works like a charm.
First, install with npm.
npm install angular-google-charts@6.2.6 npm install highcharts@4.2.5
Please note that the version 6.2.6 works with Angular 6.
Then in app.module.ts, import the following.
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'; import * as more from 'highcharts/highcharts-more.src'; import * as solidGauge from 'highcharts/modules/solid-gauge.src'; ... providers: [{ provide: HIGHCHARTS_MODULES, useFactory: () =&amp;amp;gt; [more, solidGauge] }], ...
In the component class
<div #chartTarget></div> //component class import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core'; import { chart, SolidGaugeChart } from 'highcharts'; import * as Highcharts from 'highcharts'; import * as solidGauge from 'highcharts/modules/solid-gauge.src'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, AfterViewInit { title = 'app'; @ViewChild('chartTarget') chartTarget: ElementRef; options: any; chart: Highcharts.ChartObject; ngOnInit() {} ngAfterViewInit() { this.initOptions(); this.chart = chart(this.chartTarget.nativeElement, this.options as any); } initOptions() { this.options = { chart: { type: 'solidgauge' }, title: { text: 'Solid Gauge Demo' }, pane: { startAngle: -90, endAngle: 90, background: { backgroundColor: 'white', innerRadius: '60%', outerRadius: '90%', shape: 'arc' } }, tooltip: { enabled: false }, // the value axis yAxis: { stops: [ [0.5, 'green'], // green [0.6, 'yellow'], // yellow [0.9, '#DF5353'] // red ], length: 5, lineWidth: 0, minorTickInterval: null, tickAmount: 2, title: { y: -70 }, labels: { y: 16 }, min: 0, max: 200, plotBands: [ { from: 0, to: 100, color: 'green' }, { from: 100, to: 120, color: 'yellow' }, { from: 120, to: 200, color: 'red' } ] }, plotOptions: { solidgauge: { dataLabels: { y: 5, borderWidth: 0, useHTML: true } } }, series: [ { data: [80] } ] }; } }
The result of above is as below
pics courtesy: medium.com
As you can see, there are more configurable properties in the above sample code than the other two components. And this is just a simple version, for more available API, go to highcharts API reference site.
For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop custom web app using Angular, please visit our technology page.
Content Source:
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2025 — HK Infosoft. All Rights Reserved.
© 2025 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap