Angular 7 Tutorials – An Overview and Quick Guidance

Estimated study time: 20 minutes. A quick, practical tour of what Angular 7 brought to the framework.

Angular 7 focused on developer productivity and tooling polish rather than sweeping new APIs, making it a great, stable version to learn the fundamentals on.

What's New in Angular 7

• CLI Prompts — the Angular CLI started asking helpful questions (like whether to add routing) during project generation.
• Virtual Scrolling — via the CDK, rendering only visible items in a long list for major performance gains.
• Drag and Drop — a new CDK module for building drag-and-drop interfaces without a third-party library.
• Bundle Budgets — the CLI would warn you when your production bundle exceeded a configured size.

Getting Started

npm install -g @angular/cli@7
ng new my-angular7-app
cd my-angular7-app
ng serve --open

Using Virtual Scrolling

import { ScrollingModule } from '@angular/cdk/scrolling';

<cdk-virtual-scroll-viewport itemSize="50" style="height: 300px">
  <div *cdkVirtualFor="let item of items">{{ item }}</div>
</cdk-virtual-scroll-viewport>

Why Angular 7 Still Matters to Learn

Even years later, understanding Angular 7's project structure, module system, and CLI conventions gives you a foundation that carries directly into every later version — the core architecture hasn't fundamentally changed.