Angular - 2-11 Exercice 1

It is time to put into practice what we have learned about components. In this exercise you will create, register, use and style your own components and see how an Angular application is composed of building blocks. Pause the video, take the time to work through it, then come back to compare with the proposed solution.

The first task is to create two new components - one by hand and one with the Angular CLI. We start manually: create a folder named warning-alert and a file warning-alert.component.ts inside it. In that file, export a class WarningAlertComponent and decorate it with @Component imported from @angular/core. The decorator must declare at least a selector (app-warning-alert) and a template. Here we will use an inline template with a paragraph that reads "Warning! you're in danger". The second component is generated with the CLI: ng generate component success-alert (or the shortcut ng g c success-alert). We delete the spec file we do not need, and inside the generated HTML file we display "Success! It is my success message".

Wire the components into the app

  • Add <app-warning-alert> and <app-success-alert> in app.component.html, separated by an <hr>.
  • SuccessAlertComponent was registered automatically by the CLI. The manual WarningAlertComponent must be imported and added to the declarations array of AppModule.

If you skip the registration step you will see an error in the console: "app-warning-alert is not a known element". Once the import is added, the application displays both alerts. The final step is to style them. For the warning alert we use inline styles inside the decorator (styles: ['p { padding: 20px; background: lightpink; border: 1px solid red; }']). For the success alert we use the external CSS file already referenced by the CLI and pick a light green background with a green border. We end up with two boxes, one red and one green, each rendered by its own component. This exercise was meant to make you comfortable with creating, using and styling components. We will go deeper into Angular fundamentals in the next lessons.

Summary

This Angular exercise walks through creating two reusable components—warning-alert and success-alert—both manually and using the Angular CLI. Students learn to generate components, configure them with selectors and templates, add them to the module, instantiate them in the application, and style them appropriately using inline styles with colors (red for warnings, green for success).

Key points

FAQ

Why did the warning-alert component throw an 'unknown element' error?

Because the component was not declared in the app module. While components generated with the CLI are auto-added to declarations, manually created components must be imported and declared explicitly in the module's imports and declarations arrays.

What's the difference between defining a component template inline versus in an external file?

Inline templates use backticks (template: `<p>...</p>`), keeping code in one file; external templates reference an HTML file (templateUrl: './warning-alert.component.html'), separating markup from logic for larger components.

How do you style individual components with CSS to avoid global style conflicts?

Use either inline styles in the component's @Component decorator (styles: [`...`]) or reference an external component-specific stylesheet. These styles are scoped to the component by Angular's encapsulation, preventing conflicts with global styles.

>