Theprogrammersfirst | A technical portal.

Angular v10 strict opt-in mode that allows to perform more build-time optimizations and help you deliver faster apps with fewer defects. This mode is still only an opt-in because it comes with its trade-offs — stricter type checking and extra configuration. Opting in to Strict Mode To opt into the strict mode, you need to create a new Angular CLI app, specifying the --strict flag: ng new my-app --strict The command above will generate a workspace with the following settings enabled on top of the defaults: Strict mode in TypeScript, as well as other strictness flags recommended by the TypeScript team. Specifically, strict, forceConsistentCasingInFileNames, noImplicitReturns, noFallthroughCasesInSwitch Turns on strict Angular compiler flags strictTemplates and strictInjectionParameters Reduced bundle size budgets by ~75% Turns on no-any TSLint rule to prevent declarations of type any Marks your application as side-effect free to enable more advanced tree-shaking Str...

The mat-tree provides a Material Design styled tree that can be used to display hierarchy data. This tree builds on the foundation of the CDK tree and uses a similar interface for its data source input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-. There are two types of trees: Flat tree and nested tree. The DOM structures are different for these two types of trees. Flat tree In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence. An instance of TreeFlattener is used to generate the flat list of items from hierarchical data. The "level" of each tree node is read through the getLevel method of the TreeControl; this level can be used to style the node such that it is indented to the appropriate level. <mat-tree>   <mat-tree-node> parent node </mat-tree-node>   <mat-tree-node> -- child node1 </mat...

Angular 10 : tabs/navigation Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab's label is shown in the tab header and the active tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels. The active tab may be set using the selectedIndex input or when the user selects one of the tab labels in the header. Events The selectedTabChange output event is emitted when the active tab changes. The focusChange output event is emitted when the user puts focus on any of the tab labels in the header, usually through keyboard navigation. HTML: <mat-tab-group mat-align-tabs="start">   <mat-tab label="First">Content 1</mat-tab>   <mat-tab label="Second">Content 2</mat-tab>   <mat-tab label="Third"...

Angular 10 : autocomplete The autocomplete is a normal text input enhanced by a panel of suggested options. Simple autocomplete Start by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected. <mat-autocomplete #auto="matAutocomplete">   <mat-option *ngFor="let option of options" [value]="option">     {{option}}   </mat-option> </mat-autocomplete> HTML: <form class="example-form">   <mat-form-field class="example-full-width">     <input type="text"            placeholder="Pick one"            aria-label="Number"            matInput            [formControl]="myControl"       ...

Angular 10 : checkbox example <mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations. HTML: <mat-card>   <mat-card-content>     <h2 class="example-h2">Checkbox configuration</h2>     <section class="example-section">       <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>       <mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>     </section>     <section class="example-section">       <label class="example-margin">Align:</label>       <mat-radio-group [(ngModel)]="labelPosition">         <mat-radio-button class="example-margin" value="after">After</mat-radio-button>    ...

Angular 10 : input example matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>. <input> and <textarea> attributes All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well. This includes Angular directives such as ngModel and formControl. The only limitation is that the type attribute can only be one of the values supported by matInput. Supported <input> types The following input types can be used with matInput: color date datetime-local email month number password search tel text time url week HTML: <form class="example-form">   <mat-form-field class="example-full-width">     <mat-label>Email</mat-label>     <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"       ...

Angular 10 : menu example <mat-menu> is a floating panel containing list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: <button mat-button [matMenuTriggerFor]="menu">Menu</button> HTML: <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">   <mat-icon>more_vert</mat-icon> </button> <mat-menu #menu="matMenu">   <button mat-menu-item>     <mat-icon>dialpad</mat-icon>     <span>Redial</span>   </button>   <button mat-menu-item disabled>     <mat-icon>voicemail</mat-icon>     <span>Check voice mail</span>   </button>   <button mat-menu-item>     <mat-icon>notifications_off</mat-icon>   ...

Angular 10 : radio-button Example <mat-radio-button> provides the same functionality as a native <input type="radio"> enhanced with Material Design styling and animations. All radio-buttons with the same name comprise a set from which only one may be selected at a time. HTML: <label id="example-radio-group-label">Pick your favorite season</label> <mat-radio-group   aria-labelledby="example-radio-group-label"   class="example-radio-group"   [(ngModel)]="favoriteSeason">   <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">     {{season}}   </mat-radio-button> </mat-radio-group> <div>Your favorite season is: {{favoriteSeason}}</div> JavaScript/TS: <label id="example-radio-group-label">Pick your favorite season</label> <mat-radio-group   aria-labelledby=...

Angular 10 : datepicker The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together. Example: <mat-form-field appearance="fill">   <mat-label>Choose a date</mat-label>   <input matInput [matDatepicker]="picker">   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>   <mat-datepicker #picker></mat-datepicker> </mat-form-field>

Angular 10 : toggle button <mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically part of a mat-button-toggle-group. Example: <mat-button-toggle-group name="fontStyle" aria-label="Font Style">   <mat-button-toggle value="bold">Bold</mat-button-toggle>   <mat-button-toggle value="italic">Italic</mat-button-toggle>   <mat-button-toggle value="underline">Underline</mat-button-toggle> </mat-button-toggle-group>

Angular 10 Button Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples. Native <button> and <a> elements are always used in order to provide the most straightforward and accessible experience for users. A <button> element should be used whenever some action is performed. An <a> element should be used whenever the user will navigate to another view. There are several button variants, each applied as an attribute: Attribute   mat-button   Rectangular text button w/ no elevation mat-raised-button Rectangular contained button w/ elevation mat-flat-button Rectangular contained button w/ no elevation mat-stroked-button Rectangular outlined button w/ no elevation mat-icon-button Circular button with a transparent background, meant to contain an icon mat-fab Circular button w/ elevation, defaults to theme's accent color mat-mini-fab Same as mat-fab b...

Angular Version 10 Released! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. What’s in Angular 10 release? New Date Range Picker Angular Material now includes a new date range picker. <mat-form-field>   <mat-label>Enter a date range</mat-label>   <mat-date-range-input [rangePicker]="picker">     <input matStartDate matInput placeholder="Start date">     <input matEndDate matInput placeholder="End date">   </mat-date-range-input>   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>   <mat-date-range-picker #picker></mat-date-range-picker> </mat-form-field> 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 i...

One thing I like a lot in ES2015 is the new arrow function syntax, using the 'fat arrow' operator (⇒). It is SO useful for callbacks and anonymous functions! Let’s take our previous example with promises: getUser(login)   .then(function (user) {   return getRights(user); // getRights is returning a promise   })   .then(function (rights) {   return updateMenu(rights);   }) can be written with arrow functions like this: getUser(login)   .then(user => getRights(user))   .then(rights => updateMenu(rights)) How cool is it? THAT cool! Note that the return is also implicit if there is no block: no need to write user ⇒ return getRights(user). But if we did have a block, we would need the explicit return: getUser(login)   .then(user => {   console.log(user);   return getRights(user);   })   .then(rights => updateMenu(rights)) And it has a special trick, a great power over normal functions: the...

Promises aim to simplify asynchronous programming. Our JS code is full of async stuff, like AJAX requests, and usually we use callbacks to handle the result and the error. But it can get messy, with callbacks inside callbacks, and it makes the code hard to read and to maintain. Promises are much nicer than callbacks, as they flatten the code, and thus make it easier to understand. Let’s consider a simple use case, where we need to fetch a user, then their rights, then update a menu when we have these. With callbacks: getUser(login, function (user) {   getRights(user, function (rights) {   updateMenu(rights);   }); }); Now, let’s compare it with promises: getUser(login)   .then(function (user) {   return getRights(user);   })   .then(function (rights) {   updateMenu(rights);   }) I like this version, because it executes as you read it: I want to fetch a user, then get their rights, then update the menu. As you can see, a pro...

Angular 10 released it's Preview Angular 10.0.0-next.2. In Angular 9 main focus is to use the Ivy compiler and runtime by default and TypeScript 3.7 version upgradation. In the Upcoming version 10, the main focus is on Bug Fixes and Performance Improvements. List of component/package/module   Bug Fixes and Performance Improvements  included in  Angular 10 : common locales/global/*.js are not ES5 compliant let KeyValuePipe accept type unions with null compiler handle type references to namespaced symbols correctly avoid undefined expressions in holey array record correct end of expression core undecorated-classes-with-decorated-fields migration should avoid error if base class has no value declaration ngOnDestroy on multi providers called with incorrect context avoid migration error when non-existent symbol is imported workaround Terser inlining bug ngcc correctly detect external files from nested node_modules/ display output from the unlocker p...

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. Build Speed Improvements Improved the speed of ngcc, and allowed it to compile multiple packages concurrently. TypeScript 3.8 Added support for TypeScript 3.8, in addition to existing support for 3.6 and 3.7. This release adds many great features to the TypeScript language, including: Type-Only Imports and Exports ECMAScript Private Fields Top level await New CLI Component Generator Option displayBlock 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: n...

The 9.0.0 release of Angular is here! This release including the framework, Angular Material, and the CLI. This release switches applications to the Ivy compiler and runtime by default, and introduces improved ways of testing components. This is one of the biggest updates to Angular made in the past 3 years, it empowers developers to build better applications and contribute to the Angular ecosystem. How to update to version 9 First, update to the latest version of 8 ng update @angular/cli@8 @angular/core@8 Then, update to 9 ng update @angular/cli @angular/core Ivy Version 9 moves all applications to use the Ivy compiler and runtime by default. Ivy compiler and runtime advantages: Smaller bundle sizes Faster testing Better debugging Improved CSS class and style binding Improved type checking Improved build errors Improved build times, enabling AOT on by default Improved Internationalization Faster testing Previously, TestBed would recompile all compone...