Scribd
Upload
122 views

Angular Components

Angular components are the building blocks of Angular applications. Components control the look and functionality of an application through TypeScript code and HTML templates. Each component consists of a CSS selector, HTML template, TypeScript class, and optional CSS styles. To create a component, the @Component decorator is applied to a TypeScript class along with configuration options like selector, template, templateUrl, styles, stylesUrls, and viewProviders.

Uploaded by

bapatla
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
122 views

Angular Components

Angular components are the building blocks of Angular applications. Components control the look and functionality of an application through TypeScript code and HTML templates. Each component consists of a CSS selector, HTML template, TypeScript class, and optional CSS styles. To create a component, the @Component decorator is applied to a TypeScript class along with configuration options like selector, template, templateUrl, styles, stylesUrls, and viewProviders.

Uploaded by

bapatla
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Angular

Components
Components
• Angular components are the building blocks to create Angular
applications.
• Angular components facilitate to build self-contained UI
elements for an application.
• Components control how the application looks and functions
through TypeScript code and an HTML template.
• Each component consists of:
– A CSS selector that defines how the component is used in a template
– An HTML template that declares what renders on the page
– A Typescript class that defines behavior
– Optionally, CSS styles applied to the template
Components
Components
Components
• To create a component, import Component from Angular and
apply it to a TypeScript class that can be used to control the
look and functionality of the component.
• Within the @Component decorator are several component
configuration options provide metadata for the component.
• The following list includes some of the most important
options available:
• selector: This option allows you to define the HTML tag name
used to add the component to the application via HTML.
Components
• template: This option allows you to add inline HTML to define
the look of the component.
• This is for when there won’t be very much code to add, and
it’s helpful for when you don’t want extra files.
• templateUrl: This option allows you to import an external
template file rather than inline HTML.
• This is helpful for separating a large amount of HTML code out
of a component to help with maintainability.
Components
• styles: This option allows you to add inline CSS to your
component.
• Use it when only minor style changes are needed.
• stylesUrls: This option allows you to import an array of
external CSS stylesheet(s).
• You should use this rather than styles when importing
external CSS files.
• viewProviders: This is an array of dependency injection
providers.
• It allows you to import and use Angular services that provide
application functionality such as HTTP communications.

You might also like