What's new in Angular 7?


Posted On: Feb 22, 2018


Angular Elements is enabled to support content projection with the help of web standards for custom elements.

  • Angular Material Gets Minor Updates

    Angular Material got better in the display that gives it an elegant look in the new update. Moreover, it also added a new homepage for the material, material.io. In this, you get tooling, design guidance, development components and stay up-to-date with the latest news.

    If you are using an Angular Material v7 then you observe a visual difference as library make changes to itself with the updated version of the Material Design.

  • Better Accessibility for Selects

    In the updated version, it includes a lot of new features to enhance accessibility for selects. It adds a new feature of the native select inside mat-form-field. It is far better and outperformed than the mat- select.

    Both the select and mat-select are available so you can choose what you want to do.

  • Virtual Scrolling

    The Component Dev Kit (CDK) is available in the market with the great virtual scrolling capabilities that the user can apply by importing the `ScrollingModule`!

    <cdk-virtual-scroll-viewport itemSize="20">   
    <div *cdkVirtualFor="let dog of dogsArray"> {{dog}}</div> 
  • Drag & Drop

    The CDK in the new update also now recommends Drag & Drop, which possess these great hallmarks:

  • Automated render as a user moves items

    It is new feature available only in Angular 7

  • Helper methods for reordering/transferring items in lists

    For reordering or transferring items in lists, you can use a helper method: moveItemInArray and transferArrayItem

  • Enhancing Application Performance

    You will get enhanced application performance in Angular 7

  • A safeguard has come into play for the users of Angular 7

    It gives a portent to new application builders when they are crossing the budget with their bundle size. The warning occurs on 2 MB whereas an error occurs over 5 MB. But you don't need to frighten. You can change the limits simply in your angular.json file. The thing you have to do is add in a bit about the warnings and error sizes with budget details.

    "budgets": [
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"

    Related Questions

    Please Login or Register to leave a response.

    Related Questions

    Angular 7 Interview Questions

    What is IVY Renderer? Is it supported by Angular 7?

    Angular will be releasing a new kind of rendering pipeline and view engine...

    Angular 7 Interview Questions

    What are the Core Dependencies of Angular 7?

    Core DependenciesThere are two types of core dependencies: RxJS and TypeScript...

    Angular 7 Interview Questions

    How to update Angular 4,5, 6 to Angular 7?

    First of all, you need to update the Angular version globally by inserting the latest version via the terminal:..