What’s new in Angular 15
Over the past year, the team has removed Angular’s legacy compiler and rendering pipeline which enabled the development of a series of developer experience improvements in the past couple of months. Angular v15 is the culmination of this with dozens of refinements that lead to better developer experience and performance.
Standalone APIs are now out of developer preview!
In v14 they introduced new standalone APIs which enable developers to build applications without using NgModules. they’re happy to share that these APIs graduated from developer preview and are now part of the stable API surface. From here on they will evolve them gradually following semantic versioning.
As part of making sure standalone APIs were ready to graduate they have ensured that standalone components work across Angular, and they now fully work in HttpClient, Angular Elements, router and more.
The standalone APIs allow you to bootstrap an application using a single component:
import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: `
… <image-grid [images]="imageList"></image-grid>
`,
})
export class PhotoGalleryComponent {
// component logic
}
bootstrapApplication(PhotoGalleryComponent);
Router and HttpClient tree-shakable standalone APIs
You can build a multi-route application using the new router standalone APIs! To declare the root route you can use the following:
export const appRoutes: Routes = [{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes')
.then(routes => routes.lazyRoutes)
}];
Where lazyRoutes are declared in:
import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
and finally, register the appRoutes in the bootstrapApplication call:
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes)
]
});
Another benefit of the provideRouter API is that it’s tree-shakable! Bundlers can remove unused features of the router at build-time. In their testing with the new API, they found that removing these unused features from the bundle resulted in an 11% reduction in the size of the router code in the application bundle.
Directive composition API
The directive composition API brings code reuse to another level! This feature was inspired by the most popular feature request on GitHub asking for the functionality to add directives to a host element.
The directive composition API enables developers to enhance host elements with directives and equips Angular with a powerful code reuse strategy, that’s only possible thanks to their compiler. The directive composition API only works with standalone directives.
Let’s look at a quick example:
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}
In the code snippet above they enhanced MatMenu with two directives: HasColor and CdkMenu. MatMenu reuses all the inputs, outputs, and associated logic with HasColors and only the logic and the selected inputs from CdkMenu.
This technique may remind you of multiple inheritance or traits in some programming languages, with the difference that they have a mechanism for resolution of name conflicts and it’s applicable to user interface primitives.
Image directive is now stable!
They announced developer preview of the Angular image directive that they developed in collaboration with Chrome Aurora in v14.2.
Pic courtesy: medium.com
Before and after of a demo application
The’re excited to share that it is now stable! Land’s End experimented with this feature and observed 75% improvement in LCP in a lighthouse lab test.
The v15 release also includes a few new features for the image directive:
- Automatic srcsetgeneration: the directive ensures that an appropriately sized image is requested by generating the srcset attribute for you. This can reduce download times for your images.
- Fill mode [experimental]: this mode causes the image to fill its parent container, removing the requirement to declare the image’s width and height. It’s a handy tool if you don’t know the sizes of your images or if you’d like to migrate CSS background images to use the directive.
You can use the standalone NgOptimizedImage directive directly in your component or NgModule:
import { NgOptimizedImage } from '@angular/common';
// Include it into the necessary NgModule
@NgModule({
imports: [NgOptimizedImage],
})
class AppModule {}
// ... or a standalone Component
@Component({
standalone: true
imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}
To use it within a component just replace the image’s src attribute with ngSrc and make sure you specify the priority attribute for your LCP images.
Functional router guards
Together with the tree-shakable standalone router APIs they worked on reducing boilerplate in guards. Let’s look at an example where they define a guard which verifies if the user is logged in:
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}
const route = {
path: 'somePath',
canActivate: [MyGuardWithDependency]
};
LoginService implements most of the logic and in the guard we only invoke isLoggedIn(). Even though the guard is pretty simple, they have lots of boilerplate code.
With the new functional router guards, you can refactor this code down to:
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};
They expressed the entire guard within the guard declaration. Functional guards are also composable — you can create factory-like functions that accept a configuration and return a guard or resolver function.
Router unwraps default imports
To make the router simpler and reduce boilerplate further, the router now auto-unwraps default exports when lazy loading.
Let’s suppose you have the following LazyComponent:
@Component({
standalone: true,
template: '...'
})
export default class LazyComponent { ... }
Before this change, to lazy load a standalone component you had to:
{
path: 'lazy',
loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}
Now the router will look for a default export and if it finds it, use it automatically, which simplifies the route declaration to:
{
path: 'lazy',
loadComponent: () => import('./lazy-file'),
}
Better stack traces
The team gets lots of insights from their annual developer surveys so they want to thank you for taking the time to share your thoughts! Digging deeper into the struggles with debugging experience developers face they found that error messages could use some improvement.
Pic courtesy: medium.com
Debugging struggles for Angular developers
They partnered with Chrome DevTools to fix this! Let’s look at a sample stack trace that you may get working on an Angular app:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at Generator.next (<anonymous>) at asyncGeneratorStep (asyncToGenerator.js:3:1) at _next (asyncToGenerator.js:25:1) at _ZoneDelegate.invoke (zone.js:372:26) at Object.onInvoke (core.mjs:26378:33) at _ZoneDelegate.invoke (zone.js:371:52) at Zone.run (zone.js:134:43) at zone.js:1275:36 at _ZoneDelegate.invokeTask (zone.js:406:31) at resolvePromise (zone.js:1211:31) at zone.js:1118:17 at zone.js:1134:33
This snippet suffers from two main problems:
- There’s only one line corresponding to code that the developer has authored. Everything else is coming from third-party dependencies (Angular framework, Zone.js, RxJS)
- There’s no information about what user interaction caused the error
The Chrome DevTools team created a mechanism to ignore scripts coming from node_modules by annotating source maps via the Angular CLI. They also collaborated on an async stack tagging API which allowed them to concatenate independent, scheduled async tasks into a single stack trace. Jia Li integrated Zone.js with the async stack tagging API, which allowed them to provide linked stack traces.
These two changes dramatically improve the stack traces developers see in Chrome DevTools:
ERROR Error: Uncaught (in promise): Error Error at app.component.ts:18:11 at fetch (async) at (anonymous) (app.component.ts:4) at request (app.component.ts:4) at (anonymous) (app.component.ts:17) at submit (app.component.ts:15) at AppComponent_click_3_listener (app.component.html:4)
Here you can follow the execution from the button press in the AppComponent all the way to the error.
Release MDC-based components to stable
They’re happy to announce the refactoring of the Angular material components based on Material Design Components for Web (MDC) is now done! This change allows Angular to align even closer to the Material Design specification, reuse code from primitives developed by the Material Design team, and enable us to adopt Material 3 once they finalize the style tokens.
For many of the components they’ve updated the styles and the DOM structure and others they rewrote from scratch. They kept most of the TypeScript APIs and component/directive selectors for the new components identical to the old implementation.
They migrated thousands of Google projects which allowed us to make the external migration path smooth and document a comprehensive list of the changes in all the components.
Due to the new DOM and CSS, you will likely find that some styles in your application need to be adjusted, particularly if your CSS is overriding styles on internal elements on any of the migrated components.
The old implementation of each new component is now deprecated, but still available from a “legacy” import. For example, you can import the old mat-button implementation by importing the legacy button module.
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
Visit the migration guide for more information.
They moved many of the components to use design tokens and CSS variables under the hood, which will provide a smooth path for applications to adopt Material 3 component styles.
More improvements in components
They resolved the 4th most upvoted issue — range selection support in the slider.
To get a range input use:
&lt;mat-slider&gt; &lt;input matSliderStartThumb&gt; &lt;input matSliderEndThumb&gt; &lt;/mat-slider&gt;
Additionally, all components now have an API to customize density which resolved another popular GitHub issue.
You can now specify the default density across all of your components by customizing your theme:
@use '@angular/material' as mat; $theme: mat.define-light-theme(( color: ( primary: mat.define-palette(mat.$red-palette), accent: mat.define-palette(mat.$blue-palette), ), typography: mat.define-typography-config(), density: -2, )); @include mat.all-component-themes($theme);
The new versions of the components include a wide range of accessibility improvements, including better contrast ratios, increased touch target sizes, and refined ARIA semantics.
CDK Listbox
The Component Dev Kit (CDK) offers a set of behavior primitives for building UI components. In v15 they introduced another primitive that you can customize for your use case — the CDK listbox:
Pic courtesy: medium.com
The @angular/cdk/listbox module provides directives to help create custom listbox interactions based on the WAI ARIA listbox pattern.
By using @angular/cdk/listbox you get all the expected behaviors for an accessible experience, including bidi layout support, keyboard interaction, and focus management. All directives apply their associated ARIA roles to their host element.
Improvements in the experimental esbuild support
Pic courtesy: medium.com
In v14 they announced the experimental support for esbuild in ng build to enable faster build times and simplify our pipeline.
In v15 they now have experimental Sass, SVG template, file replacement , and ng build –watchsupport! Please give esbuild a try by updating your builders angular.json from:
"builder": "@angular-devkit/build-angular:browser"
to:
"builder": "@angular-devkit/build-angular:browser-esbuild"
If you encounter any issues with your production builds, let us know by filing an issue on GitHub.
Automatic imports in language service
The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.
Pic courtesy: medium.com
CLI improvements
In the Angular CLI they introduced support for standalone stable APIs. Now you can generate a new standalone component via ng g component –standalone.
They’re also on a mission to simplify the output of ng new. As a first step they reduced the configuration by removing test.ts, polyfills.ts, and environments. You can now specify your polyfills directly in angular.json in the polyfills section:
"polyfills": [ "zone.js" ]
To reduce configuration overhead further, they now use .browserlist to allow you define the target ECMAScript version.
For more information and to develop web applications 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 your custom web app using Angular, please visit our technology page.
Content Source:
- medium.com
Angular Best Practices and Standards
Angular is a TypeScript-based free and open-source web application framework. It is a complete rewrite of AngularJS.
This article outlines a few of the standards and best practices of Angular that you could use and experience when developing the applications.
- Avoid ‘any’ type
- Avoid Logic in templates
- Use Lint Rules
- Break large components into small reusable components
- Documentation in Code
- Use Environment Variables
- Small functions
- Maintain proper folder structure
- Follow consistent Angular coding styles
- Use Lazy Loading
Let’s go through this one by one!
1. Avoid ‘any’ type
Typescript is a type-checking language. But there may be some instances like where you need dynamic contents, where you don’t know the exact data type of some variables etc. In such cases, you can use the data type ‘any’ to tell typescript that the variable can be of any type.
But using ‘any’ always is not a good practice. Using ‘any’ tells the typescript to skip the type checking. This may expose your code to issues that are difficult to trace and debug which will cost you a lot.
You can minimize these issues by trying to declare variables or constants with a type other than ‘any’ whenever possible.
Another advantage of having good and proper type declarations in the application is that it makes refactoring easier.
2. Avoid Logic in templates
A template in an angular application defines the component’s view. It is very important to keep them neat and understandable.
If you add logic in the template, it becomes difficult for unit testing and will lead the application more prone to bugs. Even if you have a simple logic in your template, it is better to extract it out into its component.
3. Use Lint Rules
Linting forces an application codebase to be cleaner and more consistent. Lint rules will ensure the readability of the code. Having lint rules will give a nice error when you do something that you should not be. It is widely supported across all modern editors and also possible to customize with your own lint rules and configurations. You can apply lint rules for Typescript and SCSS.
Before Angular 11, linting was supported via a library called TSLint. However, the TSLint has been deprecated. Fortunately, thanks to tools from the Angular ecosystem, migrating to ESLint has become easier.
ESLint is compatible with both JavaScript and TypeScript. This makes jumping between the two languages a bit easier, especially for new developers.
tslint, eslint and stylelint have many inbuilt options.
Some lint rules even come with fixes to resolve the lint error.
4. Break large components into small reusable components
If there are parts which you need in many places in the code in the application, extract the parts which can be reused in the component and make it a new one. Make the component as dumb as possible where the component does not contain any special logic in it and operates purely based on the inputs and outputs provided to it.
As a general rule, the last child in the component tree will be the dumbest of all. (You may have to use property and event bindings to pass inputs to the components and receive output events from the components, respectively.)
This will be very effective for many reasons.
If the UI has to be changed at any point, there is no need of going around and changing the UI code in all the places where it is used. Instead, you can change the code in the common component created.
Also, It is very difficult to debug, manage and test Large components. So If the component becomes large, break it down into more reusable smaller components, so that you can easily manage, maintain and debug with less effort. Reusable components reduce duplication of code, therefore, making it easier to maintain and make changes.
Pic courtesy: medium.com
5. Documentation in Code
The same developers will not always be involved continuously with the same project they work on. So always document the code as much as possible. It will help the new developers involved in a project to understand its logic and increase readability.
For methods, you need to define them using multi-line comments on what task the method actually performs and all parameters should be explained.
6. Use Environment Variables
The default environments in angular are development and production environments. Angular has different environment configurations to declare individual variables for each of the different types of environments. It is possible to even add more environments, or add new variables in existing environment files.
E.g:
Dev environment -> environment.ts
Production environment -> environment.prod.ts
The environment variables are applied automatically from the specified environment file during the application build.
7. Small functions
Always try to define small functions which would have a limit of no more than 75 lines.
Advantages of using small functions are that it is easier to test and reuse since they may probably do one thing and serve one purpose. Also they are easier to maintain and read.
8. Maintain proper folder structure
Creating and Maintaining a proper folder structure is an important factor developers should consider before initiating any angular project. The folder structure should be easily flexible to adapt new changes throughout development.
Below image shows one of such example folder structure.
Pic courtesy: medium.com
9. Follow consistent Angular coding styles
It is better to follow a set of rules as much as possible in order to have the project with the proper coding standard and a best user experience. Here are a few out of them.
- Files should be limited to maximum 400 lines of code.
- Define small functions which are limited to not more than 75 lines.
- If the values of the variables are not varying, then declare it with ‘const’.
- Use dashes to separate words in the descriptive name and use dots to separate the descriptive name from the type.
- Use lower camel case to name properties and methods.
- Do name an interface using upper camel case.
- Use upper camel case when naming classes.
10. Use Lazy Loading
Lazy loading is the process which loads some features of the Angular application only when their routes are navigated for the first time. Lazy loading will load something only when it is used. This helps to improve the application’s performance and helps keep initial bundle sizes smaller, which can decrease the application load time by not loading the modules that are not used.
So, try to lazy load the modules in an Angular application whenever possible.
For more information and to develop web applications 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 your custom web app using Angular, please visit our technology page.
Content Source:
- medium.com
What’s new in Angular 13
The new release of Google’s popular TypeScript-based web framework is available now.
This post will bring you closer to the most important new features and breaking changes in Angular 13 and help you decide whether an update for your project is worthwhile.
Goodbye View Engine – 100% Ivy
Angular has introduced its next-generation compilation and rendering pipeline Ivy since its version 8. Angular 9 has used Ivy by default while maintaining support for the predecessor compiler and runtime View Engine.
The new version of the framework is now 100 percent Ivy.
To streamline and modernize the Angular Package Format (APF), View Engine specific metadata and older output formats are now removed, which will reduce maintenance costs and the complexity of the codebase in Angular 13. All internal tools are converted to Ivy beforehand so that the change should work smoothly.
Ivy compiles individual components more independently of one another, which improves development times. The use of ngcc (Angular compatibility compiler) is no more required for libraries built with the latest version of the APF. This will offer a faster execution for libraries developers.
Ergonomic APIs
The load time is reduced in Angular 13 with the help of ergonomic code-splitting APIs and granular code breakdown at a component level.
A performance improvement was also achieved with the introduction of ESBuild, an extremely fast JavaScript bundler. ESBuild works now with terser to optimize global scripts and supports CSS sourcemaps, which enables optimized global CSS.
The time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.
Pic courtesy: betterprogramming.pub
No More Support for IE11
To benefit from native web APIs and modern browser features such as web animations and CSS variables, the Angular team has removed the Internet Explorer 11 support.
This offers a smaller bundle size and faster load for apps and an improved user experience because of the absence of IE-specific polyfills and the no need for differential loading.
This breaking change will certainly affect authorities or institutions that still use IE 11 and have not yet switched to Microsoft Edge or other modern browsers.
Update of Component API
You can now create dynamic components with less boilerplate code thanks to an improvement of ViewContainerRef.createComponent API.
Here is the old way of creating a dynamic component:
export class InquiryDialog implements OnInit {
componentRef: ComponentRef;
@ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;
constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData, private componentFactoryResolver: ComponentFactoryResolver) {}
ngOnInit(): void {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.inquiryPageComponent);
this.componentRef = this.container.createComponent(componentFactory);
}
}
And with Angular 13, there is no need to use ComponentFactoryResolver:
export class InquiryDialog implements OnInit {
componentRef: ComponentRef;
@ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;
constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData) {}
ngOnInit(): void {
this.componentRef = this.container.createComponent(this.data.inquiryPageComponent);
}
}
Angular 13 way of creating a dynamic component
Improved Debugging and Test Times
TestBed is the primary unit tests API for Angular applications and libraries.
In order to decrease the test time in TestBed, the new version is released with an improved test API. The framework can now set up and tear down the test environment and learn the DOM automatically after each test run. This leads to faster, less memory-intensive, and better-isolated tests.
New Type for Forms
Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:
- The type of AbstractControl.status, for example, is now FormControlStatus instead of string.
- And the type of StatusChanges is Observable<FormControlStatus> instead of Observable<any>.
Router
- There is an improvement for the router so that it will not replace the browser URL when new navigation cancels ongoing navigation.
- There is a proposition to fix an incorrect parsing for navigation. This happens when the default URL serializer drops everything afterward like a question mark in query parameters: /users?start=1?&pages=15
- You can add missing outlet events to RouterOutletContract, which is useful when the module federation renders components dynamically at some point in the future.
Accessibility (A11y)
There is an Accessibility (A11y) improvement in Angular Material: all Material Design Components (MDC) have been checked for better Accessibility.
Checkboxes and radio buttons, for example, have now larger touch sizes, and other components have better high contrast modes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
Pic courtesy: betterprogramming.pub
Other Changes
- The framework core now supports TypeScript version 4.4.
- Version 7 of the reactive programming library RxJs (Reactive Extensions for JavaScript) is now supported.
- Inlining fonts speed up the First Contentful Paint (FCP), which can improve the web performance. That’s why the team has introduced now support for inlining Adobe Fonts just like they did for inlining Google Fonts in Angular 11.
- We can disable or enable built-in validators such as min, max, and minLength dynamically.
- We can set custom conditions in ng_package.
- There is an improvement of error messages, like the error about “a missing animation trigger” for the platform-browser.
- Clear service worker cache in the safety worker. This ensures that broken or stale content will not be served in future requests.
- Improvement for the localization API. You can check the documentation for $localize.
For more information and to develop web applications 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 your custom web app using Angular, please visit our technology page.
Content Source:
- betterprogramming.pub
Top 5 Angular UI kits and frameworks
Angular keeps growing in adoption and keeps becoming every day more popular among Frontend implementations.
In this brief guide, we will have a look around some of the greatest and most popular UI kits and frameworks, trying to understand which one of those could be the right choice for your next project.
Angular Material
Angular Material is considered today one of the most popular UI kit for Angular, probably the most one, despite its root feature that makes it anchored to the material design style, which could be not good for everyone. With more than 22k stars on GitHub, this kit is proving its so much beloved by developers and guarantees good community support that keeps posting and discussing bugs, features to integrate, eventually performances issues, and more.
Pic courtesy: betterprogramming.pub
Pros
- Very popular
- Represent the base on which other UI kits lean
- A decent number of components
- Integrates the Material Design
- Multiple modules, not monolithic
- Integrates a good CDK
- Provides some accessibility features
- Still supporting IE 11
Cons
- Hard to customize: working with this kit will make you suffer against weird DOM structures, ghosted tags, and hard-to-code CSS styles, which in some cases required the notorious (and bad) approach of ::ng-deep rules
- Strictly bound to the Material design style
- Documentation is not much exhaustive, will lead you to StackOverflow searches. Also missing a good search engine in docs pages.
Verdict
Good to develop a CRM or an admin software, very bad for general-purpose Front end needings. Still missing good documentation and the material look-and-feel could not be good for everyone. Found it very stable: use it and don’t pretend to customize it a lot, because despite the CDK it will drive you mad as hell.
Ng-bootstrap
Defined as “Bootstrap widgets — The angular way” by its authors, the Ng-bootstrap UI kit has been popular for a lot and was one of the first kits available around.
The anthem has been “let’s replicate Bootstrap features and make them all available to Angular”. The result is a good basic UI kit without complaints, but really essential. Some components are a bit inadequate compared to the original ones and the documentation is very concise. A good choice if you need the “basic bootstrap”, but not much more.
Pic courtesy: betterprogramming.pub
Pros
- Essential, which could be an advantage
- Easy to use
- Very close to the original one in terms of look and feel
- Easy to customize
- Multiple modules, not monolithic
- It’s legacy
Cons
- Essentially… you probably won’t be ok with just this one and will lead the developer to integrate features with other stuff
- Not so much popular nowadays could miss support for specific issues
Verdict
Ng-bootstrap is a good kit if you need plain Bootstrap features, not useful if you need more. Today it’s suffering the Ngx library as a rival, but Ngx is more complete, newer, and even more professional in some cases, so let’s choose this if you don’t need much.
Ngx-bootstrap
This recent UI kit designed by Valor Software is becoming rapidly popular and lives on the “Develop faster and better” motto. Could sound like an Ng-bootstrap clone and it could be considered something similar, but the truth is that this one is completely redesigned and provides better features and advanced components.
Supports Bootstrap 3, 4, and even the 5th version proving that this library provides a good supporting community and that is often updated.
Pic courtesy: betterprogramming.pub
Pros
- It’s bootstrap-like but more advanced
- Very good documentation
- Multiple modules, not monolithic
- Got specific components out of Bootstrap, like “Rating”
- Very stable, even on advanced components
Cons
- The look-and-feel is essential, requires custom CSS rules
- Sometimes it’s hard to understand what’s real Ngx and what’s not, because the term Ngx is today adopted by many other libraries and components
Verdict
To me, Ngx is the best Bootstrap-based UI Kit. Very solid, very comprehensive documentation, and never had issues. Consider this one to be the basic standard for modern web apps. If you miss something, just integrate. This is a real bootstrap to me.
MDBootstrap
Yet another Bootstrap-based UI kit, MDBootstrap is a HUGE kit and is almost the quintessential of UI components for Angular, providing really everything for any need.
It’s the only one that comes with a CLI, premium support, and which looks like a “professional” tool. But other than that the result is not much satisfying. I found it really messy, really heavy, and hard to set up.
Pic courtesy: betterprogramming.pub
Pros
- Probably the biggest one in terms of the number of components
- Good esthetic feel, way better than the basic bootstrap
- Looks good if you need a premium UI Kit
- Provides external services: hosting and a tool for building
- MDB Pro version available (required in some cases)
- Multiple modules, not monolithic… but in this case not much effective in terms of performances
- Available also for Vue.js and React
Cons
- Looks “heavy”
- Hard to understand because of its complexity, need some time be mastered
- Looks like a commercial product
Verdict
I’ve had a brief experience with this and it just didn’t fit my needings. Could be a good choice if you want to invest some time to really understand it and to adopt it as a “company standard” development process, not really suited for spare developers or Open source projects. Too complex and too less immediate, it feels like working with a “big Java framework” more than a UI Kit for angular.
Carbon Components for Angular
The IBM’s solution for Front end needings: this UI kit looks enterprise, professional, and even beautiful. Carbon didn’t become a real breakthrough in the UI kits panorama and competition, but it’s worth trying.
The documentation is superb, covering really a lot of aspects about components implementations.
Pic courtesy: betterprogramming.pub
Pros
- Professional tool, supported by IBM
- Exhaustive documentation with live examples
- Multiple modules, not monolithic
- Built-in Design patterns and approaches
Cons
- Too much professionalism for some B2C needings
- Not much popular… will you solve your issues?
- Requires good skills
Verdict
The Carbon IBM’s solution looks very fascinating and charming but must be considered an advanced tool which could not suit your needings. There are many projects where you really don’t need that much technique and its complexity will force you to spend some hours to really understand approaches and mechanisms. Give it a try if you need an enterprise tool.
For more information and to develop web applications 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 your custom web app using Angular, please visit our technology page.
Content Source:
- betterprogramming.pub
What’s new in Angular 12
Angular provides unmatchable features that make it the most preferred framework in the Web Development industry today. The Angular version 12.0.0 release has come up again with the most compelling features and customization options to take your development journey to a new horizon. The new release of the Angular 12.0.0 version brings updates on the framework, the CLI, and components.
Let’s have a look at the unique and unparalleled features in Angular 12.0.0:
1. Better developer ergonomics with strict typing for @Angular/forms.
The Angular team has focused on enforcing secure and strict methods of checking for reactive forms. The new update will help developers to look out for issues in the development stage. This upgrade will also enable better text editor and ide support allowing the developer better developer ergonomics with strict typing for Angular/forms. The previous versions were not as aggressive in addressing this issue, but Angular 12 does it perfectly.
2. Removing legacy View Engine.
When the transition to Ivy of all internal tooling gets done, removing the legacy View engine becomes the next challenge. No worries! The newly added removing legacy View Engine aims to reduce framework overheads. This is because of smaller Angular conceptual overhead, smaller package size, saving on maintenance cost, and decrease in the complexity of the codebase. With the knowledge of Ivy, it’s the best path to take while using the latest version of Angular. An application that has upgraded to the latest version of Angular (Angular 12.0) and is keeping enable Ivy as false, should consider this since in the future they cannot upgrade to the latest version if they don’t start using Ivy.
3. Leverage full framework capabilities.
Design and implement a plan to make Zone.js optional. This will, in turn, simplify the framework, improve debugging, and minimize application bundle size.Zone.js does not support native async/await syntax and when Zone.js is optional and a developer can choose not to use it then Angular will be able to support native async/ await syntax.
4. Improving test time, debugging, and test time environment.
Testbed automatic clean-up and tear down of the test environment after each test run, will improve test time and create better isolation across tests.
5. Easier Angular mental model with optional modules.
This will simplify the Angular mental model and learning. This will allow the developers to develop standalone components and implement other types of APIs for the declaration of the component compilation scope. On the other hand, we have to note that this change might make it hard for existing applications to migrate to this.
This feature will allow developers to have more control over the compilation scope for a particular component without giving much thought to the NgModule they belong to.
6. Adding Directives to Host Elements.
Adding directives to host elements has been on high request by Angular developers for a long time. The new release allows developers to architecture their components with additional characteristics without using inheritance. At the moment you cannot add directives to host elements, but you can improvise using: host CSS selector. As the selector of these components also becomes a DOM element, we could have more possibilities if we could add more directives to this element too.
7. Better Build performance with NGC as TypeScript plugin distribution.
The Angular compiler being distributed as a TypeScript plugin will significantly improve the developer’s build performance and reduce the cost.
8. Ergonomic Component level code-splitting APIs.
The slow initial load time is the major problem with web applications. Applying more granular code-splitting on a component level can solve this problem. This will mean smaller builds and faster launch time and in return result in improved FCP.
That’s all for the new release.
Now, let us take a look at the possibilities that are in progress and will be available shortly.
Inlining critical styles in universal applications.
Firstly, this will result in faster applications. Loading external stylesheets is a blocking operation. This means that the browser cannot initiate rendering an application without first loading all the referenced CSS. Its FCP (First Contentful Paint) can be improved by having a render-blocking in the header of a page that can visibly improve the load performance.
Angular language service to Ivy.
To date, the Angular language service still uses the View Engine compiler and type checking even for Ivy applications. The goal is to improve the experience and to remove the legacy dependency. This will be achieved by transitioning from View Engine to Ivy. The team at Angular wants to start using the Ivy template parser and improved type checking for the Angular language service to match Angular application behaviour. This will simplify Angular, npm size reduction, and improve the framework’s maintainability.
Debugging with better angular error messages.
The error messages bring limited information on how a developer can take actions to resolve them. The Angular team is working on codes, developing guides, and other measures to ensure an easy debugging experience and make error messages more discoverable.
Better security with native Trusted Types in Angular.
In conjunction with the Google security team, the Angular team is working on adding support for the new Trusted Type API. This API will aid developers to make more secure web applications.
Optimized build speed and bundle size.
With Angular, the CLI Webpack 5 stability will continue urging for the implementation to enable build speed and bundle size improvements.
Advanced Angular Material Components.
Integrating MDC weblink will align Angular Material closely with the material design specification, expand the accessibility reach, improve component quality and improve the overall team velocity.
Faster debugging and performance profiling.
The team at Angular could focus its attention on working on tooling that will help in the provision of utilities for debugging and performance profiling. The primary aim is to help the developers understand the component structure and the means to note changes in the angular application.
MDC web is a library created by the Google Material Design team that provides reusable primitives for building material design components.
For more information and to develop web applications 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 your custom web app using Angular, please visit our technology page.
Content Source:
- knowledgehut.com
How to structure Angular Apps
There are many ways one can structure an Angular app. But this is how we structure our applications for extensive flexibility, scalability, and small initial bundle size.
Fig-1: Preferred Directory Structure
Pic courtesy: javascript.plainenglish.io
- Core: The things that are absolutely essential for the app to start.
- Features: Business logic. Contains modules, components, services, and other angular building blocks (if required) for a particular business feature.
- Shared: Components so dumb that it hurts!
- Pages: Routed components with lazy loaded modules.
Core
Core directory is the place where you put singleton services, injection tokens, constants, app configurations, pipes, interceptors, guards, auth service, utils, etc. that will be used app-wide. If there is something which is specific to the application itself, deployment, CI/CD, API, and the Developer – chances are, it belongs to the core.
Fig-1: Example Core directory
Pic courtesy: javascript.plainenglish.io
Features
Business features live in this directory. Make a module per feature. That module can contain components, directives, pipes, services, interfaces, enums, utils, and so on. The idea is to keep things close. So, a pipe, that is solely used in the Speakers module should not be defined in the global scope or inside Core. The same goes for any other angular building block required by this module only.
Fig-2: An example feature module
Pic courtesy: javascript.plainenglish.io
Components are prefixed according to the module name e.g.- if the module name is SpeakersModule, components would be named SpeakerAbcComponent, SpeakerXyzComponent etc.
Keep the component tree inside the directory flat. That means, if SpeakerListComponent is the parent and SpeakerListItemComponent is child, do not create speaker-list-item component inside the speaker-list directory. The prefixed naming should be clear to indicate such a relation. The idea is to be able to see what components reside in the module at a glance.
Feature modules can import other features and obviously from shared modules.
Shared
Consider shared modules a minWe library for your UWe components. They are not specific to a single business feature. They should be super dumb that you can take all the components, drop in another angular project, and expect to work (given the dependencies are met). You might already know that wrapping UWe components provided by other libraries such as Material, ng-zorro-antd, ngx-bootstrap, etc. is a good practice. It protects you from their APWe changes and allows you to replace the underlying library if required. Components in shared modules are a good place for such wrapping.
Fig-3: Example Shared Directory
Pic courtesy: javascript.plainenglish.io
Do not make a giant SharedModule, rather granularize each atomic feature into its own module (see Fig-3). Criss-cross import of atomic shared modules is allowed, but try to minimize as best as possible. To bring a flavor of a tiny library, you could even prefix the directories & modules with your angular application’s custom prefix (by default it is app ).
Pages
Pages directory is the most interesting part of this structure. Think of it like a sink, where feature modules fall into but nothing comes out (i.e- no exported member). In these modules, you do not declare any component other than the page.
Fig-4: Example Page Module
Pic courtesy: javascript.plainenglish.io
Page controllers have no business logic. They are merely the presenter and orchestrates components from business feature modules. Let’s say – home page. It will contain a header, a hero section, articles, comments, contact, etc. sections – all coming from respective feature modules!
@NgModule({
declarations: [HomePageComponent],
imports: [
CommonModule,
ArticlesModule,
CommentsModule,
ContactModule,
HeadersModule,
HomePageRoutingModule,
],
})
export class HomePageModule {}
How a fictional home-page.component.ts might look like:
<app-header-default></app-header-default>
<main class="container">
<app-hero-content></app-hero-content>
<app-article-list></app-article-list>
<app-comment-list-latest></app-comment-list-latest>
<app-contact-form></app-contact-form>
</main>
<app-footer-default></app-footer-default>
They can take help from a page-specific service that combines data and state for that page only. You should provide such service to the page component and NOT in root. Otherwise, the state may persist even after you navigate away from the page because the page component will get destroyed but not the page service.
// home-page.service.ts
@Injectable()
export class HomePageService {}
// home-page.component.ts
@Component({
...
providers: [HomePageService]
}
export class HomePageComponent {
constructor(private homePageService: HomePageService){}
}
The most important purpose of page modules is that each module is loaded lazily to make the app performant and lite.
Every page module is lazy-loaded!
Pro-tip: If you define a single page component per module, then you can claim a further reduction in the initial bundle size. This practice also organizes all routes in a single source (namely AppRoutingModule) which is easier to manage. Then, your app-routing.module.ts file may look like this:
const appRoutes: Routes = [
{
path: '',
loadChildren: () => import('./pages/home-page/home-page.module').then((m) => m.HomePageModule),
},
{
path: 'home',
redirectTo: '',
pathMatch: 'full',
},
{
path: 'products/:id', // <-------- NOTE 1. Child route
loadChildren: () =>
import('./pages/product-details-page/product-details-page.module').then((m) => m.ProductDetailsPageModule),
},
{
path: 'products', // <--------- NOTE 2. Parent route
loadChildren: () =>
import('./pages/product-list-page/product-list-page.module').then((m) => m.ProductListPageModule),
},
{
path: 'checkout/pay',
loadChildren: () =>
import('./pages/checkout-payment-page/checkout-payment-page.module').then((m) => m.CheckoutPaymentPageModule),
},
{
path: 'checkout',
loadChildren: () => import('./pages/checkout-page/checkout-page.module').then((m) => m.CheckoutPageModule),
},
{
path: '**',
loadChildren: () => import('./pages/not-found-page/not-found-page.module').then((m) => m.NotFoundPageModule),
},
]
Notes 1 & 2: Since route declarations are parsed top-to-bottom, be sure to declare child paths before the parent path. This will ensure lazy-loading chunks fetched correctly. Otherwise, if you define the parent route first, then visiting any child route will also load the parent route’s module chunk unnecessarily. You can see the difference in DevTools. Here is my experiment when We put parent route first (Fig-5.1) VS child route first (Fig-5.2)
Fig-5.1: When /products declared BEFORE /products/:id in routes config
Pic courtesy: javascript.plainenglish.io
Fig-5.2: When /products declared AFTER /products/:id in routes config
Pic courtesy: javascript.plainenglish.io
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:
- javascript.plainenglish.io
Top 6 Angular component libraries
Angular is one of the most popularly used frameworks with best-designed practices and tools for app development companies. Angular encourages the developers to use components to split the user interface into reusable and different pieces. There are many popular Angular component libraries available in the market that can help the Angular development companies create a robust application for their clients.
In this blog, we will go through some of the most popular Angular component libraries that one can use in 2021.
Why Use Angular Component Libraries?
Angular components are created by using Angular and TypeScript. These components are implemented with Google’s material design. It also enables the Angular developers to split the UI into various pieces. Some of the fantastic aspects that make developers use Angular component library are –
- Modular Architecture
The components in Angular are created in a similar manner to the modules. It properly depends on the developers on which to use and when to use it.
- Responsive
The Angular component libraries are very responsive in nature, making it crucial for website designing & development.
- User-friendly
Angular component libraries are user-friendly and are built in a lightweight manner. It is effortless to learn and use for any Angular developer.
1. NGX Bootstrap
NGX Bootstrap is one of the most popular open-source Angular components. It gives vastness in bootstrap capabilities and helps developers utilize it on the next Angular app development project for their clients.
NGX Bootstrap has scored 5.2k stars by the GitHub community.
Features of NGX Bootstrap
- Flexible
AngularJS developers of the ngx-bootstrap team put effort into creating ngx-bootstrap modular, which can help the development companies implement their own whatnot, styles, and templates. All the Angular components are designed by keeping adaptivity and extensibility in mind. They can work efficiently on Desktop and Mobile platforms with the same performance level.
- Good Documentation
NGX Bootstrap offers well-written documentation that can significantly help AngularJS developers ease their work to improve software quality. The team at ngx-bootstrap provides easy to understand and complete documentation.
- Tinker-friendly Code
NGX Bootstrap has incorporated a set of guidelines that can help in enhancing the code readability and maintainability.
Components of NGX Bootstrap
- Collapse
- Typehead
- Collapse
- Alerts
- Carousel
- Accordion
2. NG Bootstrap
The NG Bootstrap is a popular Angular development bootstrap component. It has around 7.6k stars on GitHub. When working with NG Bootstrap, there is no need to use third-party JS dependencies. It is also used for high-testing coverage.
Features of NG Bootstrap
- Widgets
The NG bootstrap offers widgets like modal, tablet, rating, and tooltip.
- Accessible
The NG bootstrap offers unique widgets and gives complete access to them. The NG bootstrap team uses HTML elements and attributes that can help AngularJS app development companies create robust applications. This library also provides focus management work and keyboard navigation.
- Quality
The team at NG bootstrap tests the code with 100% convergence and reviews all the changes.
- Team
There is a bootstrap/angular-UI team created for developing widgets and also has many core Angular contributors.
- Carousel
- Popover
- Typehead
- Model
- Tooltip
- Datepicker
3. Teradata Covalent UI Platform
Teradata is a UI platform created on Angular and Angular-Material. It comes with solutions that are a combination of the comprehensive web framework and proven design language. It even gives a quick start to the AngularJS developers in creating a modern web application. Teradata Covalent scores 2.2k GitHub scores.
Angular Command-line interface enables the developers to work with Angular-material and create, deploy, & test the application. It offers simplified stepper, file upload, user interface layout, custom web components, expansion panels, and more testing tools for both end-to-end tests and unit tests.
Features of Teradata
- Angular-material components
- Utilities
- eCharts
Components of Teradata
- Base layout
- Manage list
- Expansion panels
- Virtual scrolling
- Stepper
- Loading
- Breadcrumbs
4. Nebular
Nebular is an Angular 8 UI library that focuses on the brand’s adaptability and design. It has four visual themes that have support for custom CSS properties. This library is based on the Eva Design System. Nebular holds few security modules and around 40+ UI components. Some of these components are stated below. Besides this, it also has 6.7k starts in the GitHub community.
Features of Nebular
- Server-side rendering
- High-quality Angular components
- Visual themes
Components of Nebular
- Infinite list
- Sidebar
- Layout
- Context menu
- Tooltip
- Window
- Global Search
- Checkbox
5. Clarity
Clarity is an open-source Angular component that acts as a bridge between the HTML framework and Angular components. Clarity is the best platform for both software developers and designers.
Clarity library offers implemented data-bound components and a well-structured option to the Angular development service providers. It also owns 6.1k GitHub stars.
Features of Clarity
- Product-based
The Clarity team offers an understanding and easy-to-use platform that helps the developers solve a vast array of challenges.
- Reliable
It is the most reliable platform as it provides a high bar of quality.
- Rapid Development
Clarity is designed in a way that makes communication and collaboration of expertise very easy and rapid.
- Evolving
With new technologies and techniques coming into the picture, Clarity keeps on evolving.
Components of Clarity
- Login page
- Progress bars
- Toggle Switches
- Wizard
- Signpost
- Grid
- Alert
- Password
6. Onsen UI
Onsen UI is a component library that is one of the most used by the Angular development service company for creating mobile web apps for Android and iOS using JavaScript. It has 8.2 stars in the GitHub community.
Onsen UI is a library that comes with development tools and powerful CLI with Monaca. The main benefits of Onsen UI are its UI components that can easily be plugged into the mobile application.
Features of Onsen UI
- Supports Monaca
Monaca is a cross-platform used for creating hybrid apps, and Onsen UI performs very well with it.
- Native Look
It provides ready-to-use components like toolbar, forms, side menu, and much more to give a native look. Besides this, Onsen UI also supports Android and iOS material design, making the appearance and style of the application look according to the selected platform.
- Optimized Performance
The new version of Onsen UI is now enabled to provide optimized performance without slowing up the process.
- Easy to Learn
Despite being a powerful tool to develop a mobile application, it is straightforward to learn and use.
- Zero-time Setup
Onsen UI allows the developer to work with technologies like CSS, HTML, and JavaScript. These are the technologies that they might already know, so it would take zero-time to get started with the tool.
Components of Onsen UI
- Carousel
- Conditional
- Controls
- Dialog
- Form
- Gesture
- Menu
- List
- Navigation
- Tabbar
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:
- medium.com
What’s new in Angular 11
Angular Version 11 release has updates across the platform including the framework, the CLI and components. Let’s dive in!
What’s in this release?
Automatic Inlining of Fonts
To make your apps even faster by speeding up their first contentful paint, we’re introducing automatic font inlining. During compile time Angular CLI will download and inline fonts that are being used and linked in the application. We enable this by default in apps built with version 11. All you need to do to take advantage of this optimization is update your app!
Component Test Harnesses
In Angular v9 we introduced Component Test Harnesses. They provide a robust and legible API surface to help with testing Angular Material components. It gives developers a way to interact with Angular Material components using the supported API during testing.
Releasing with version 11, we have harnesses for all of the components! Now developers can create more robust test suites.
We’ve also included performance improvements and new APIs. The parallel function makes working with asynchronous actions in your tests easier by allowing developers to run multiple asynchronous interactions with components in parallel. The manualChangeDetection function gives developers access to finer grained control of change detection by disabling automatic change detection in unit tests.
For more details and examples of these APIs and other new features, be sure to check out the documentation for Angular Material Test Harnesses!
Improved Reporting and Logging
We’ve made changes to the builder phase reporting to make it even more helpful during development. We are bringing in new CLI output updates to make logs and reports easier to read.
Screenshot of angular CLI output nicely formatted into columns.
Improved CLI output formatting
Pic courtesy: blog.angular.io
Updated Language Service Preview
The Angular Language Service provides helpful tools to make development with Angular productive and fun. The current version of the language service is based on View Engine and today we’re giving a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers.
Now, the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. For example, in the screenshot below we’re able to infer that the iterable is of type string.
Screenshot of intellisense style insights in Angular templates.
Angular Language Service inferring iterable types in templates
Pic courtesy: blog.angular.io
This powerful new update is still in development but we wanted to share an update as we keep preparing it for a full release in an upcoming version.
Updated Hot Module Replacement (HMR) Support
Angular has offered support for HMR but enabling it required configuration and code changes making it less than ideal to quickly include in Angular projects. In version 11
we’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To get started, run the following command:
ng serve --hmr
After the local server starts the console will display a message confirming that HMR is active:
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
Now during development the latest changes to components, templates and styles will be instantly updated into the running application. All without requiring a full page refresh. Data typed into forms are preserved as well as scroll position providing a boost to developer productivity.
Faster Builds
We’re bringing a faster development and build cycle by making updates to some key areas.
- When installing dependencies, the ngcc update process is now 2–4x faster.
- Faster compilation with TypeScript v4.0.
Experimental webpack 5 Support
Now, teams can opt-in to webpack v5. Currently, you could experiment with module federation. In the future, webpack v5 will clear the path for:
- Faster builds with persistent disk caching
- Smaller bundles thanks to cjs tree-shaking
Support is experimental and under development so we don’t recommend opting in for production uses.
Want to try out webpack 5? To enable it in your project, add the following section to your package.json file:
"resolutions": {
"webpack": "5.4.0"
}
Currently, you’ll need to use yarn to test this as npm does not yet support the resolutions property.
Linting
In previous versions of Angular, we’ve shipped a default implementation for linting (TSLint). Now, TSLint is deprecated by the project creators who recommend migration to ESLint. James Henry together with other folks from the open-source community developed a third-party solution and migration path via typescript-eslint, angular-eslint and tslint-to-eslint-config! We’ve been collaborating closely to ensure a smooth transition of Angular developers to the supported linting stack.
We’re deprecating the use of TSLint and Codelyzer in version 11. This means that in future versions the default implementation for linting Angular projects will not be available.
Head over to the official project page for a guide to incorporate angular-eslint in a project and migrate from TSLint.
Housekeeping
In this update we’re removing support for IE9/IE10 and IE mobile. IE11 is the only version of IE still supported by Angular. We’ve also removed deprecated APIs and added a few to the deprecation list. Be sure to check this out to make sure you are using the latest APIs and following our recommended best practices.
Roadmap
We’ve also updated the roadmap to keep you posted on our current priorities. Some of the announcements in this post are updates on in-progress projects from the roadmap. This reflects our approach to incrementally rollout larger efforts and allows developers to provide early feedback that we can incorporate it into the final release.
We collaborated with Lukas Ruebbelke from the Angular community on updating the content of some of the projects to better reflect the value they provide to developers.
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:
- blog.angular.io
Communicating between templates with function-like HTML segments in Angular
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.
Getting started
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 {...}
Minimal working example
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?
Example with multiple 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 }
]
}
Why not using ng-content?
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:
- medium.com
Version 10 of Angular now available
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.
What’s in this release?
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:
- Enables strict mode in TypeScript
- Turns template type checking to Strict
- Default bundle budgets have been reduced by ~75%
- Configures linting rules to prevent declarations of type
any - Configures your app as side-effect free to enable more advanced tree-shaking
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.
- TypeScript bumped to TypeScript 3.9
- TSLib has been updated to v2.0
- TSLint has been updated to v6
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.
How to update to version 10
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:
- blog.angular.io
