The Angular Masterclass/

...

/

Components

Components

Let's dig deeper into the structure of the Angular component.

We'll cover the following...

What are the components?

Components are the building blocks of the application. They are single pieces of functionality in our application, which are linked together under a module.

Components can have visual elements to them, which allow the user to interact with the application.

Structure of component

Let’s go back to our angular-architecture demo application. If we open app.component.ts, we will see the following:

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('angular-architecture app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
app.component.ts file of Angular app

This is the entry component of our application. If you look at the app.module.ts file, you’ll see ...