Components
23
main.ts
• This is the starting point of the application
• AngularexportsafunctionnamedplatformBrowserDynamicthatcan be used for targeting the browser. This comes from the platform browser dynamic scope package
• ThereturnedobjecthasabootstrapModulefunctionthatrunsthe bootstrap. This function is expecting a root module, in this case a module called AppModule.
24
app.module.ts
@NgModule Decorator
• Recall that a decorator is an expression that evaluates to a function allowing annotation of classes
• They allow us to configure/modify code like classes method and fields at design time
• AdecoratorcalledNgModuleisusedtoinformAngularthattheclass code in here is intended to be an Angular module, it uses a decorator.
• AngularimportstheNgModuledefinitionfromitscorepackage.
25
app.module.ts
• The imports property is used to bring in other Angular modules that your module will need.
• The declarations property is used to make components, directives, and pipes available to other modules.
• The bootstrap property is used for a root module and lets Angular know which component or components will be the entry point for your app code.
26
app.module.ts
Browser
• We want to make use of the browser module that the Angular platform has available in the platform-browser scope package.
• Contains directives, pipes, and other tools for working with the DOM
• The module is imported and added to the list of imports for our application
…
27
app.module.ts
The Bootstrap
• Finally, we need a starting point for our application
• It is in a file called app.component.ts and is imported via
• app.component must be used in the starting code for the app, it’s the root component
28
app.component.ts
@Component Decorator
• Angularusesthe@Component()decoratorthatallowsustospecifya class as an Angular component
• It provides additional metadata that determines how the component should be rendered
29
app.component.ts
• app.component.ts is found inside the app directory.
• To build an Angular component, we need to use the component
decorator on a class which comes from the core scope package
• To decorate / define a component, you need to provide at least two properties: selector and template (or template URL).
• The component decorator takes in an object literal.
30
The Component’s Selector
• Bydefault,therootcomponenthastheselectorapp-root • You can change it but must use at least one dash
• In index.html:
31
The Component’s Template
Template and Styles
• The are two ways to create a template for a component:
• Usingatemplateproperty OR
• UsingatemplateURLpropertyandcreatingatemplatefile(ie. app.component.html’)
• This will resolve relative paths
• Similarly, there are two ways to style
• Usingthestylesproperty OR
• UsingstyleURLsandcreatinganexternalCSSfile(s)
• ThestylesURLspropertytakesinanarrayofCSSfiles
• It will automatically be injected into the
time
• The style is automatically scoped to the component you’re currently writing
32
Nested Components
Using components inside other components
• To create a subcomponent, we need to:
1. Use the CLI to generate (or just add the files yourself)
$ ng generate component
this generates a folder that contains Html, Css, Spec (testing) files, Component info (
2. In the root (bootstrap) component, import and declare subcomponent
3. Add selector to parent components and use properties to pass variables (optional)
33
Angular Templates
Syntax and Features
• In a template, we can the following things: • Interpolation and Binding
• Expressions and Expression operators • Conditionals
• Template variables
34
Data Interacting with templates
Interpolation and Expressions
• Interpolation means binding data to a template
• Data binding is the basis of Angular, binding data to templates means to
make data available to a particular template
• Data can bind to templates in three ways:
• {{ }} expressions
• By using attributes or methods in the exported component class • Property binding (i.e. [textContent] = “variable”)
35
Component Inputs
@Input decorator
• To pass data from one level component to the next, we must do the following things:
1. Import the Input decorator from the @angular/core scoped package
2. use the @Input decorator to indicate this to the subcomponent
36
Component Inputs
@Input decorator
• To pass data from one level component to the next, we must do the following things:
3. Set a property with an existing variable in the parent component in the selector tag
…
4. Use the data in the subcomponent’s HTML file
37