Create a new Angular 4 Component – Multiple Components Angular Application

https://grokonez.com/frontend/angular/create-new-angular-4-component-multiple-components

Create a new Angular 4 Component – Multiple Components Angular Application

The previous post, We had introduced how to set up an Angular 4 App with SpringBootSuite. In the tutorial, JavaSampleApproach will show you how to create a new Angular 4 Component and build an Angular Application with multiple Components.

Angular 6:

• Angular 6 Component – How to create & integrate New Angular 6 Component

Related articles:

• How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

I. Technologies

– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Angular Component

Example:

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

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

export class AppComponent implements OnInit {
  customers: Customer[];
  selectedCustomer: Customer;

  constructor() {}

  getCustomers() {
     ...
  }

  ngOnInit(): void {
     this.customers = this.getCustomers();
  }

}

What is Component?
-> Component is a basic building block of Angular Application. It allows us to mark a logic class, and additional metadata for processing at runtime. Components have a template (in above code is './app.component.html') and only one component can be instantiated per an element in a template.
A component must belong to an NgModule. So you should declare it in a NgModule:

More at:

https://grokonez.com/frontend/angular/create-new-angular-4-component-multiple-components

Create a new Angular 4 Component – Multiple Components Angular Application