Class Types | Table O Contents

The difference between a Ng Plain Class and a Ng Component Class is simply one of complexity …

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

Ng Plain Class

Hint. A Ng Plain Class in Angular 4 consists of an export statement coupled with the name of the class followed by a Typescript style of variable declaration, both name and type, followed by a constructor statement.

¡Recuerde! Typescript classes are EXPORTED and the act of exportation exposes the declared variables ( by type ) as well as the methods of the underlying Typescript class to the other components within your Angular 4 application at large.

Ng Component Class

An Ng Component Class in Angular 4 also consists of an export statement …

Coupled with the name of the class followed by

The Typescript style of variable declaration ie.) both name and type,

Followed by a constructor statement.

Ng Component Top Aggregate Import Statement

But, in addition …!

A Typescript class within an Ng Component may also show additional statements such as implements that points to an aggregate import statement at the top of the Ng Component, as follows:

Ng Component Class Statement


export class NameOfComponent implements OnInit {

Ng Component Import Component Statement


import { Component, OnInit } from '@angular/core';

Ng Component Middle Ng Statement

Inside the Ng Component Class you may also find an ng statement similar to the constructor statement that also points to the import statement at the top of the Ng Component, as follows:

Ng Component Ng Statement


ngOnInit() {
    //
  }

Ng Component Import OnInit Statement


import { Component, OnInit } from '@angular/core';

Note. The ng statement is commonly placed below the constructor statement in the hierarchy of the Ng Component Class

Ng Decorated Directives

Above the Ng Component Class, but below the Ng Component Top Aggregate Import Statement … The Decorated Directive named ‘Component’ resides ie.) @Component.


@Component({
  selector: 'app-write-me',
  templateUrl: './write-me.component.html',
  styleUrls: ['./write-me.component.css']
})

Note. The Directive named ‘Component’ is decorated with three metadata sections as shown above ( selector, template, style ). In this case, the ‘At’ symbol, or @ serves as the Decorator Symbol.

Last Subtitle

More to come …

Note. The above synopsis was derived from articles written by Martin Heller [1] and Nate Murray [2].

  1. Get Started With Angular by Martin Heller.

  2. ng-book 2: The Complete Guide to Angular by Nate Murray, Felipe Coury, Ari Lerner, and Carlos Taborda.

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.