React Vs Angular: Which Is A Best Fit For Your Business Project?
React Vs Angular: Which Is A Best Fit For Your Business Project? Avakash Dekavadiya This is the real story of every developer building web apps or front-end. With the myriad of options available in the form of JS frameworks, it’s confusing to choose the right JS framework that meets the business-specific project requirements along with critical aspects. It’s difficult to get out of this struggle. The tug of the war between the two frontend frameworks- Angular and React is a real struggle. Picking up one and placing a bet on one of these frameworks is a daunting task when clients ask for the best option to select. If you are also one of those entrepreneurs, we recommend you connect with web app development experts that provide the right decision based on your project details. The extensive expertise and experience of our developers in trying their hands on both frameworks enabled us to shed light on the comparison of these two frontend frameworks- Angular and React. Before getting into the depth of their differences, we will first understand what’s Angular and React frameworks. What is React.JS? The frontend JS library was developed by Facebook to build excellent UI. Leveraging declarative programming style, React determine UI state and enable developers to preview how the app will look and user interaction. In addition to reusable library code, the JSX and virtual DOM in React makes it a great fit for native-rendered, mobile app, and web app development. The open-source nature of the framework enabled businesses to use React libraries to build UI from the ground. The modularity and coherent nature of components make React highly reusable that increases the development time. Netflix, New York Times, and others have migrated to React for high-performance and other impressive features. What is Angular.JS? Since 2010, the Angular framework is developed and maintained by Google with continuous upgrades. Since the release of Angular 2 in 2016, the umbrella term Angular 2 is used for all the Angular updated versions from Angular 2 to Angular 10. It’s built on top of TypeScript to create web apps, hybrid apps, and single-page web apps. With support for MVC architecture, Ajax, HTTP, and Observables, the framework is the best fit for dynamic web app development. Forbes, Samsung forward, BMW, and Microsoft Office home projects are built using the Angular framework. Hire Frontend Developers Contact The one-to-one comparison between React vs. Angular to know the best of both worlds Performance React and Angular are good frontend frameworks that deliver the best performance for web and mobile development. However, React uses virtual DOM to update the change without rewriting the complete HTML document. Thereby rendering update gets speed up, which in turn, ensures fast performance regardless of app type and size. Angular operates on real DOM to access and change document content, layout, and others. The problem with real DOM is- for updating a little data, the tree structure of HTML tables gets updated unless it reaches the data that needs to alter. Angular copes up with performance lagging with code practices optimization that enable the Angular app to deliver good performance. Angular provides $cacheFactory to recalculate the data that needs to calculate at a later stage, which works best for memorization. That’s why PayPal’s payment gateway leverages Angular to handle more than 300 million transactions across the world. Component architecture React framework builds user interface by breaking web app UI development into components. At first, the components are built that self-manage their respective states and then structured together for complex UI engineering. Also, Redux, Babel, and Webpack are some of the tool integrations are required for component architecture creation. The Angular ecosystem has an array of features such as Angular CLI, Angular Universal, and RxJS that build an architecture plain-sailing without any outside help. Data binding Syncing data between UI and business logic is referred to as data binding. React uses one-way data binding wherein nesting of child component with high-order parent component is done, which makes debugging easier and code stable. Heavy parsing tasks and enormous data manipulation are managed by React leveraging one-way data binding in conjunction with two-way data helpers. On the other hand, Angular leverages both one-way and two-way data binding that updates two layers with the same data. The model layer gets updated as soon as the input data changes in the backend. The binding of the HTML element with the model variable helps in crafting interactive UI with no callbacks or developers’ efforts intervention. The bi-directional nature of Angular with two-way data binding makes it easier for enterprises to obtain data from ERP software like- accounting, finance, medical, and other software. Bundle file optimization Businesses that team up with web application development partners expect high loading speed to improve click-through rates. It’s a bundle file that’s downloaded at the initial page, which is if optimized, the page gets loaded quickly. Bundle file size matters a ton in the case of large-sized web or mobile apps as it impacts performance. Angular handles single-page web application development easily. The framework leverages the compiler to create an understanding between the code in the bundle file and the browser, which speeds up compiling process. However, the HTML code written in components extends the bundle size that interferes with performance. That’s where the Ahead-of-time compiler helps a ton, which is activated through CLI. React uses WebPack to break your code into smaller parts, dynamic import loads only required code, and tree shaking to remove unused modules for reducing bundle file size. Code quality Angular CLI, Angular Material, Angular Core, and other tools allow developers to build and deliver the project with quality code. It also helps in predicting compilation behavior that enables creating builds smoothly and minimizing iterating efforts, which ultimately results in quality code. React is different from other frameworks in the sense of code review practices provided by Linters. Following a set of rules strictly, Linters generate the same code practices that keep the codebase consistent, which, in turn, improves the code
Sign In with Google in Angular using AuthO
Sign In with Google in Angular using AuthO Avakash Dekavadiya Angular is javascript’s most famous framework for building a single-page web application. There are many ready to use the library which enhances development speed and user experience but when we talk about user login, user login is not always easy to do and manage. So let’s have a look at the step-by-step process to user login into your angular web application with Google using OAuth. Once a user gets login with google into our web app, you’ll get a confirmation that the user has valid email and profile on Google. Before we begin, let’s have an overview of OAuth and how does it work. What is OAuth? OAuth is a protocol that provides big website’s users’ information to any third party web app or mobile application without sharing the user’s password or any other personal information or any sensitive details. Web giants websites like Google, Microsoft or Facebook allows its user to share his/her piece of information to any third party application or website while protecting sensitive and confidential information. Security and Confidentiality OAuth is a secure platform and maintain the confidentiality of the user’s data as it doesn’t share password data but uses auth tokens to prove an identity between consumers and service providers. OAuth allows interacting one application to service providers on behalf of the user without giving away the user’s password. How does OAuth work? When we first click on Sign Up with Google, it redirects you to www.gmail.com and checks whether you are already logged in or not. If you are not logged in then it prompts you to Login window with these fields- EmailId and Password. Once you’ve logged in, it will display a small dialogue box that shows what kind of information will be shared with this third party web app or mobile application. Now there’re 2 cases to move forward: If you agree to the information, then press the Continue button. If you are not okay with the information which is shared with the third-party web application you can easily edit your preference. Now, Google redirects back you to a third party web application with an authentication code so that it’s clear that the user has authorized Google account or not. The website can now show the unique code which was acquired while registering for the first time as a legal web application to Google and get the restricted users’ information consisting of your name, email address, and profile image, etc. Why Login with Google? Reduces the burden of login for your users Gateway to connecting with Google’s users in a secure manner. Makes register or login process faster. Offers familiarity. Generate ClientID First, go to https://console.developers.google.com/ and create your project. Setup information about your project in OAuth consent screen, select the scope which might require your web app. Here the scope means user’s google information such as email id, profile picture. After the consent setup, you have to create a client ID for your web app from the credentials section. We will also add localhost as authorized origins so that when we test, it will work. Now select OAuth client ID from given options and provide necessary details for your web application and create client ID and copy client ID for further use. Steps for Google login in Angular web application. For logging with Google we have to install npm library “angular4-social-login” into our angular application. npm install –save angular4-social-login Imports these dependencies from angular4-social-login into your app.module.ts. import { SocialLoginModule , AuthServiceConfig , GoogleLoginProvider } from ‘angular4-social-login’; Copy Client ID which we had already created as above into your app.module.ts. // client id for google login const google_auth_client_id : string = “…………………….. Google Client ID……………………..” Now configure client ID in object as below. // configure client id in object let config = new AuthServiceConfig([{ id: GoogleLoginProvider.PROVIDER_ID, provider : new GoogleLoginProvider(google_auth_client_id) }]) Import SocialLoginModule as below imports: [ … SocialLoginModule.initialize(config) ], For sign in and out users do the following. Create a constructor of the AuthService in your component.ts file. Import the AuthService and GoogleLoginProvider from “angular4-social-login”. Now, Create signIn() and signOut() method for login and logout functionality. import { AuthService, GoogleLoginProvider} from ‘angular4-social-login’; … constructor(private _socioAuthServe : AuthService,private router : Router){} Login function is as below, //Method for sign in with google signIn(platform : string): void{ platform = GoogleLoginProvider.PROVIDER_ID; this._socioAuthServe.signIn(platform).then((response)=>{ this.user = response; } ); } We receive a SocialUser object when the user logs in and a null when the user logs out. SocialUser object contains basic user information such as name, email, photo URL, etc. Signout method for the same is as below. //Method for sign in with google signOut() : void{ this._socioAuthServe.signOut(); } We can display user’s information as below in our template file. <img src=”{{ user.photoUrl }}”> <div> <h4>{{ user.name }}</h4> <p>{{ user.email }}</p> </div> Conclusion Before wrapping up let’s go through a quick summary of what we’ve covered so far. So, OAuth basically gives third party application a special key that only provides restricted information about a user while maintaining security and Confidential details of users. We’ve learned the steps to generate client ID for Google login from console.developers.google.com, how to use client ID for login system in angular with help of integrating “angular4-social-login” library with the simple steps mentioned above. Gone are the days when conventional approaches were used for doing business. Today, enterprise web application development can make the entire web portal more enticing. Looking for an intuitive, fast & robust web application? AIMDek serves as a full stack vendor undertaking end-to-end enterprise web application development projects for established market leaders as well as emerging businesses with technology at their heart. Bring on your queries at sales@aimdek.com skip render: ucaddon_next_prev_post
UI Testing with Protractor to Test Angular Applications
UI Testing with Protractor to Test Angular Applications Avakash Dekavadiya Angular is one of the most popular Javascript frameworks for building web applications. There are three popular versions of Angular upto date — Angular 1 (also known as AngularJS), followed by Angular 2, which is succeeded by Angular 4. It is gaining in popularity because it extends the functionality of HTML and can be used to quick launch applications. Although the developers take too much time in developing the application by using different tactics and critical thinking but ultimately the client or user is the person who is actually going to pass or use the application. It is very important to test the UI in all aspects so that the user will not get any trouble while using the application. What is important is the application should be easy to use and if the UI is tested properly it makes the usability of application easier. What is Protractor? Protractor is an end-to-end testing framework for AngularJS applications and works as a solution integrator combining powerful tools and technologies such as NodeJS, Selenium WebDriver, Jasmine, Cucumber and Mocha. It was initially developed by Google Developers to support angular applications and later it is released as an open source framework. Now protractor supports both angular and Non-Angular applications. The protractor is wrapper written on top of Webdriver.js, all the features which are supported in Selenium Webdriver are supported by it, in addition to angular specific features. WebDriverJs is the official javascript implementation of Selenium. It uses the Selenium JSON-Wire-Protocol to interact with the browser as selenium java does. Protractor depends on WebdriverJs to interact with the browser. Features of Protractor Automation tool Let’s have a look at some of the salient features of the Protractor Automation tool: Built on the top of WebdriverJS and Selenium server Introduced new simple syntax to write tests Allows running tests targeting remote addresses Can take advantage of Selenium grid to run multiple browsers at once Can use Jasmine or Mocha to write test suites Protractor Installation Steps Here, we’ve used the protractor framework and configured on a windows environment. Below are the steps for installation: Install Protractor Globally on Environment Step 1: Download and install NodeJS. Make sure its path is configured correctly after installation. Also check that you should find node from command prompt. Ignore if you already have nodejs installed. Step 2: Open the command prompt and type in the following command to install protractor globally. npm install –g protractor Install Protractor Locally For local installation type the following command in the command prompt of your project directory : npm install protractor To verify your installation, please type in the command Protractor –version If Protractor is installed successfully then the system will display the installed version. Otherwise you will have to recheck the installation. Step 3: If you don’t have the Selenium server on your machine, then download the latest version onto your machine. If you want to run tests on different browsers, then please download the respective drivers as well. For example, Chrome driver will come in handy to run tests on the Chrome browser. You are good to go now. Finally the main step. Write Your Test Cases Create a clean folder for testing. Protractor needs two files to run, a spec file and a configuration file. Copy the following into spec.js: // spec.js describe(‘Protractor Demo App’, function() { it(‘should have a title’, function() { browser.get(‘https://aimdek.com’); expect(browser.getTitle()).toEqual(‘aimdek’); }); }); The describe and it syntax is from the Jasmine framework. browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get. Now create the configuration file. Copy the following into conf.js: // conf.js exports.config = { framework: ‘jasmine’, seleniumAddress: ‘http://localhost:4444/wd/hub’, specs: [‘spec.js’] } This configuration tells Protractor where your test files (specs) are, and where to talk to your Selenium Server (seleniumAddress). It specifies that we will be using Jasmine for the test framework. It will use the defaults for all other configuration. Chrome is the default browser. Now run the test with protractor conf.js You should see a Chrome browser window open up and navigate to the Calculator, then close itself (this should be very fast!). The test output should be 1 tests, 1 assertion, 0 failures. Congratulations, you’ve run your first Protractor test! Step 1 – Interacting with elements Now let’s modify the test to interact with elements on the page. Change spec.js to the following: // spec.js describe(‘Protractor Demo App’, function() { it(‘should add one and two’, function() { browser.get(‘https://aimdek.com’); element(by.model(‘first’)).sendKeys(1); element(by.model(‘second’)).sendKeys(2); element(by.id(‘gobutton’)).click(); expect(element(by.binding(‘latest’)).getText()). toEqual(‘5’); // This is wrong! }); }); This uses the globals element and by, which are also created by Protractor. The element function is used for finding HTML elements on your webpage. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use sendKeys to type into <input>s, click to click a button, and getText to return the content of an element. element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators. Here, we’re using three types of Locators: by.model(‘first’) to find the element with ng-model=”first”. If you inspect the Calculator page source, you will see this is . by.id(‘gobutton’) to find the element with the given id. This finds . by.binding(‘latest’) to find the element bound to the variable latest. This finds the span containing {{latest}} Learn more about locators and ElementFinders. Run the tests with protractor conf.js You should see the page enter two numbers and wait for the result to be displayed. Because the result is 3, not 5, our test fails. Fix the test and try running it again. Step 2 – Writing multiple scenarios Let’s put these two tests together and clean them up a bit. Change spec.js to the following: // spec.js describe(‘Protractor Demo App’, function() { var firstNumber = element(by.model(‘first’)); var secondNumber = element(by.model(‘second’)); var goButton = element(by.id(‘gobutton’)); var latestResult = element(by.binding(‘latest’)); beforeEach(function() { browser.get(‘https://aimdek.com/’); }); it(‘should have a title’, function() { expect(browser.getTitle()).toEqual(‘aimdek’); }); it(‘should add one and
Angular or Angular JS : Understanding the detailed differences
Angular or Angular JS : Understanding the detailed differences Avakash Dekavadiya Web development is a great place to start your adventure with programming. When we talk about the best frontend framework, angular is the buzzword. Angular is an open source front end framework. Most of the newbies usually get confused in between Angular and AngularJS, as most of them think that both are the same and it’s just a matter of a word. Although it is not true. AngularJS is an open-source, JavaScript-based, front-end web application framework for dynamic web app development, whereas Angular is the blanket term used to refer to Angular 2, Angular 4 and all other versions that come after AngularJS. Both Angular 2 and 4 are open-source, TypeScript-based front-end web application platforms. Angular 7 is the latest version of Angular. First of all, let’s dive into the comparison between AngularJS and Angular. Architecture: In Angular JS there is a Model-view-controller (MVC) design which has a central component. It represents the application, manages its logic and rules. Controllers accept the input and convert them into commands and then sends the commands to model and the view. In Angular controller and scope were replaced by components and directive. Components are directive with a template. These are the structural directives that alter the layout of the DOM by removing and replacing its elements, and attributive directives that change the behavior or appearance of a DOM element. Language: Angular JS is a JavaScript language whereas Angular is TypeScript. Expression Syntax: For the binding, any property or event you need to remember appropriate ng directive in Angular JS whereas Angular focuses on “( )” for event binding and “[ ]” for property binding. Mobile support: Angular JS doesn’t have mobile support whereas Angular have mobile support. Routing : In Angular JS, the syntax is $routeprovider.when() whereas, in Angular, the syntax is @RouteConfig{(…)} Performance & Speed: Angular JS has moderate performance and speed whereas Angular has high performance and speed. Development Speed: Angular JS provides moderate development speed whereas Angular provides high development speed. What’s new in Angular? Angular 4/5/6/7 is just an upgrade version of Angular 2. So there is no major change in the code to migrate from Angular 2 to Angular 4/5/6/7. Angular 4 comes with some additional enhancements and improvements than Angular 2. Here are some of the few enhancements: Animation Package: Animations play a big part in Angular. There is an in-built angular core code in version 2, but in version 4, the animation function gets an independent package in order to discard all the useless code from the bundle which has been shipped to the users. Router: Angular 4 introduces a new interface to represent URL parameters which are known as ParaMap. They offer a choice to the developer to get a single value or all the values of a URL query parameter since it can have multiple values. Though the change is not too hard for Angular developers as they can use ParaMap or queryParaMap instead of using Params and queryParams in Angular 2. Speed and Performance: The important change in Angular 4 is the increase in speed and performance of the applications developed by it. This is primarily due to the improvement of the view engine for them ahead of time compilation function. Pipes: New pipes have made template driven development easy. HTTP Request Simplified: Adding search parameters to an “HTTP request” has been simplified. Apps Testing Simplified: Angular 4, overriding a template in a test has also been simplified. Introduced new service for Meta Tags: A new service has been introduced to easily get or update “Meta Tags” Forms Validators Attributes: One new validator joins the existing “required”, “minLength”, “maxLength” and “pattern”. An email helps to validate that the input is a valid email. Compare Select Options: A new “compareWith” directive has been added and used to help you compare options from a select field. Enhancement in Router: A new interface “paramMap” and “queryParamMap” has been added and introduced to represent the parameters of a URL. Added Optional Parameter: This “CanDeactivate” interface now has an extra (optional) parameter which contains the next state. Angular is a pure component based. Change detection has also been improved. Angular 2/4/5/6/7 has AOT Ahead of time compilation which improves the rendering speed. AngularJS is based on javascript only whereas Angular and the following version is typescript based so even if javascript is disabled in the client’s browser the application’s default page can be rendered. Angular has simpler APIs, lazy loading, easier debugging, also provides a way to execute more than two systems together. Let’s have a look at some of the comparisons for different Angular versions. Angular 4 vs. Angular 2 Smaller & Faster Apps View Engine Size Reduce Animation Package NgIf and ngFor Improvement NgIf with Else Use of AS keyword Pipes HTTP Request Simplified Apps Testing Simplified Introduce Meta Tags Added some Forms Validators Attributes Added Compare Select Options Enhancement in Router Added Optional Parameter Improvement Internationalization Angular 5 vs. Angular 4 Make AOT the default Watch mode Type checking in templates More flexible metadata Remove *.ngfactory.ts files Better error messages Smooth upgrades Tree-Shakeable components Hybrid Upgrade Application Later on, there are two new releases – Angular 6 and Angular 7 which have developer perspective improvements. Whether you’re a developer looking to remain competitive in the ever-evolving world of web development, or a company looking for the right technology to base their application on, Angular is a solid JavaScript development platform that embraces the components oriented future of the web. Want to learn how you can deliver enterprise web applications better with us? We have all the solutions to run your business faster, for more info reach out at marketing@aimdek.com. skip render: ucaddon_next_prev_post
Creating Custom Validators In Reactive Forms Using Angular 6
Creating Custom Validators In Reactive Forms Using Angular 6 Avakash Dekavadiya Validating user input for accuracy and completeness helps in improving overall data quality. Angular and its form package turns up with a Validators class that has some beneficial validators like minLength, maxLength, required and pattern. However, occasionally if we wish to validate different fields under more complex/custom rules we can make optimum use of custom validator. Defining custom validators while using Reactive Forms in Angular comes very easy as they are more of regular functions. One can conveniently generate function for custom validators within the component file in case the validator is not supposed to be used elsewhere. But, herein we will be assuming the re-use and create respective validators in separate files. Consider the following example:[Step 1: Create a project and add material library Ng new ng6material Cd ng6mateial Ng add @angular/material Ng serve Step 2: Create component called reactiveform.component.ts Ng generate component reactiveform Configure route of reactiveform.component.ts so that we can navigate it at http://localhost:4200/reactive-form Step 3: Create a simple form with a model using Angular material and @angular/form Reactiveform.component.ts import { Component, OnInit } from ‘@angular/core’; import{FormBuilder,FormGroup} from ‘@angular/forms’; @Component({ selector: ‘app-login’, templateUrl: ‘./reactiveform.component.html’, styleUrls: [‘./reactiveform.component.css’] }) export class ReactiveformComponent implements OnInit { complexForm : FormGroup; constructor(fb:FormBuilder) { this.complexForm = fb.group({ userName:””, email:””, passWord:””, }) } ngOnInit() {} submitForm(value: any){ console.log(value); } } Reactiveform.component.html <div> <mat-card> <div style=”text-align:center;”> <img src=”https://aimdek-s3-uploads.s3.ap-south-1.amazonaws.com/wp-content/uploads/2016/12/height_70px.png”> </div> <form [formGroup]=”complexForm” (ngSubmit)=”submitForm(complexForm.value)”> <mat-form-field> <input matInput placeholder=”Username” [formControl]=”complexForm.controls[‘userName’]” /> </mat-form-field> <br> <mat-form-field> <input matInput placeholder=”email” [formControl]=”complexForm.controls[’email’]” /> </mat-form-field> <br> <mat-form-field > <input matInput placeholder=”Password” [formControl]=”complexForm.controls[‘passWord’]” /> </mat-form-field> <br> <button type=”submit” mat-raised-button color=”primary” align=”right”>Login</button> </form> </mat-card> </div> This will generate the simple model driven reactive form without in build and custom validation.Now we will add in build validation first and then will go through the custom validation. For validation we need to import Validators from the @angular/forms and have to add that particular Validators in each field of model. We are going to use Validators.required and Valodators.email in this demo. Following snippet shows the usage of build in Validators.Reactiveform.component.ts import { Component, OnInit } from ‘@angular/core’; import{FormBuilder,FormGroup,Validators,AbstractControl} from ‘@angular/forms’; @Component({ selector: ‘app-login’, templateUrl: ‘./reactiveform.component.html’, styleUrls: [‘./reactiveform.component.css’] }) export class ReactiveformComponent implements OnInit { complexForm : FormGroup; constructor(fb:FormBuilder) { this.complexForm = fb.group({ userName:[null,Validators.required], email:[null,[Validators.required,Validators.email]], passWord:[null,[Validators.required]], }) } ngOnInit() {} submitForm(value: any){ console.log(value); } } Reactiveform.component.html <div> <mat-card> <div style=”text-align:center;”> <img src=”https://aimdek-s3-uploads.s3.ap-south-1.amazonaws.com/wp-content/uploads/2016/12/height_70px.png”> </div> <form [formGroup]=”complexForm” (ngSubmit)=”submitForm(complexForm.value)”> <mat-form-field [ngClass]=”{‘has-error’:!complexForm.controls[‘userName’].valid}”> <input matInput placeholder=”Username” [formControl]=”complexForm.controls[‘userName’]” /> </mat-form-field> <br> <mat-form-field [ngClass]=”{‘has-error’:!complexForm.controls[’email’].valid}”> <input matInput placeholder=”email” [formControl]=”complexForm.controls[’email’]” /> </mat-form-field> <br> <mat-form-field [ngClass]=”{‘has-error’:!complexForm.controls[‘passWord’].valid}”> <input matInput placeholder=”Password” [formControl]=”complexForm.controls[‘passWord’]” /> </mat-form-field> <br> <button type=”submit” mat-raised-button color=”primary” align=”right” [disabled]=”!complexForm.valid”>Login</button> </form> </mat-card> </div> In this we are getting observable of Validator in html template and from that we can get boolean value whether the field is valid or not In above case are getting boolead of valid state from the complexForm object of formGroup which we have created in reactiveform.component.ts and check valid state as following:- complexForm.valid complexForm.controls[’email’].valid Step 4: Generate custom validator for password For this we have to create password.validator.ts manually because angular CLI is not providing this in it’s package. In this file we have to import abstractValidator which is also part of @angular/form package. Following is the snnipet code of password.validator.ts import { AbstractControl,Validator } from ‘@angular/forms’; export function ValidatePassword(control: AbstractControl) { if (!/^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{4,20}/.test(control.value)) { return { validPassword: true }; } return null; } This code will return boolean if password is valid and return NULL if it is not Now import this validator in reactiveform.component.ts as following. import { ValidatePassword } from ‘../validators/password.validator’; Use the ValidatePassword function along with Validator.required in password field of form model as following: passWord:[null,[Validators.required,ValidatePassword]], Now we have to use this in reactiveform.component.html inorder to display custom error message for password as following:- <div *ngIf=”complexForm.get(‘passWord’).errors && complexForm.get(‘passWord’).dirty && complexForm.get(‘passWord’).errors.validPassword”> Password must contain letter and digit. </div> And there you have it: how to create a custom validator for Angular Reactive Forms. We at AIMDek cater future-proof front-end development services. Get in touch with us at hello@aimdek.com for any queries. skip render: ucaddon_next_prev_post
Angular 6 Features. What’s New?
Angular 6 Features. What’s New? Avakash Dekavadiya What makes Angular 6 appealing is that it is the very first release that unifies the CLI, Material and Framework. Note that Angular 6 concentrates more on the toolchain and how to simplify to move quickly with Angular and less on the underlying framework. Furthermore, team Angular is coordinating the major versions stepping forward for the framework packages (@angular/common, @angular/core, @angular/compiler etc), the Angular material + CDK and the Angular CLI. Now, you can effortlessly update your old packages, create native web elements using Angular Elements and many other things with Angular 6. Let’s take a lookng update <package> is a new CLI command that analyzes your package.json and applies its expertise of Angular to suggest updates to your application. It assists you to adopt the right version of dependencies meanwhile keeping your dependencies in synchronization. Third parties can make use of schematics and cater update scripts. NOTE: ng update will not change your package manager. It makes use of yarn or npm to efficiently manage dependencies. While updating peer dependencies, it will apply needed changes to your project ng update @angular/core ng add ng add <package> is a new CLI command that assures to effortlessly allow you to add new capabilities to your project. It makes use of your package manager to download new dependencies while calling upon an installation script which is implemented as a schematic which updates your project with needed configuration changes, adds additional dependencies or stage package-specific initialization code. ng add @angular/pwa Angular Elements Angular 6 introduced us to Angular Element that concentrates on enabling you to bootstrap Angular components within your existing Angular application by recording them as Custom Elements. You can add Angular Elements by running the command below: ng add @angular/elements Angular Material + SDK Components Angular 6 got with it a new tree component which displays hierarchical data. It pursues patterns from the data-table component where the CDK resides the core tree directives. Angular Material caters the same experience with Material Design styles. Angular 6 also introduced new components like new badge and bottom-sheet components. Badge assists to display relevant information like unread item counts while bottom-sheet components represents special type of mobile-centric dialogues that pop from the bottom of viewport which is more commonly used to present a list of options following an action. The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today.CLI WorkspacesCLI version 6 provides support for workspaces comprising of multiple projects like multiple libraries or applications. CLI projects now will leverage angular.json instead of .angular-cli.json for different builds and project configuration. RxJS v6 Making use of the latest version of RxJS library RxJS v6 welcomes a few vital changes besides a backward compatibility package rxjs-compat which keeps applications working. It has been made more tree-shakable to ensure that only pieces of RxJS that you are using are included in your production bundles. Long Term Support (LTS)The Angular team had back in the time announced that only v4 and v6 would be LTS releases but now they have extended LTS to ALL the major releases beginning with v4. Every major release will be actively supported for 18 months with about 6 months of active development followed by 12 months of critical bug fixes and security patches. Library Support The new CLI command ng generate library <name> is a major support for creating and building libraries while configuring it further for testing. In efforts to make your applications smaller, Angular 6 has moved from modules referencing services to services referencing modules. This empowers you to only bundle services into your code base in the modules where they are injected particularly.Animations Performance Improvements[/minti_headline]Angular 6 has upgraded their implementation of animations where it will no longer require the web animations polyfill. This implies that you can erase this polyfill from your application and save some 47KB of bundle size while enhancing and improving performance of animations in Safari.How to update to Angular 6.0.0? The update generally follows 3 steps, and will take advantage of the new ng update tool: Update @angular/cli Update your Angular framework packages Update other dependencies What about Ivy?Ivy is Angular’s next generation rendering in pipeline which is under active development and is not a part of 6.0 release. Angular itself does not contain many innovative changes in the Angular core, but Angular-cli is undoubtedly very appealing. Team Angular is more focused on performance while seamlessly building PWAs, catering a comfortable environment to work in. skip render: ucaddon_next_prev_post
