1. Angular Components: Component Configuration, Building a Template, Using Constructors, Using External Templates, Angular Routing to Single Page Application (SPA) 2. Data Binding: Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding, Style Binding, Event Binding, Two-way Binding.

1. ANGULAR COMPONENTS
& DATA BINDING
(UNIT 2)
Dr. P. Rambabu, M. Tech., Ph.D., F.I.E.
11-Apr-2022

2. Unit 2: Components and Data Binding
Angular Components:
Component Configuration, Building a Template, Using Constructors, Using
External Templates, Angular Routing to Single Page Application (SPA)
Data Binding:
Introduction, Interpolation, Property Binding, Attribute Binding, Class Binding,
Style Binding, Event Binding, Two-way Binding.
Built-in Directives: Built in Directives, How to use Built-in Directives:
component Directives, Structural Directives, Attribute Directives.
Custom Directives: Creating a Custom Attribute Directive, Creating a Custom
Directive with a Component.

3. Angular Components
Components allow you to control how your application looks and functions
through TypeScript code and an HTML template.
Component Configuration:
An Angular component consists of two main parts:
1. Definition in the decorator section
The decorator section is used to configure the component, including things like
the selector name and HTML template.
2. Class section, which defines the logic.
The class section enables you to give the component its logic, data, and event
handlers, as well as export it to be used in other TypeScript files.

4. Within the @Component decorator are several component configuration options as
mentioned below:
1. selector: This option allows you to define the HTML tag name used to add the
component to the application via HTML.
2. 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.
3. 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.
4. styles: This option allows you to add inline CSS to your component. Use it when
only minor style changes are needed.
5. 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.
6. 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.

5. Component Configuration
Configuration
Class – Data, Logic and Error Handling
Inline HTML
Note:
• For a single-line template, you can use either single or double quotes to wrap it.
• For a multiple-line template, you use backquotes (`);

6. Inline Styling

7. Inline Styling
Inline HTML

8. Using Constructors
When you use Angular, you often need to have default values and an initial setup for
your component variables.
Constructors go in the Component class. Their purpose is to set default values and
initial configuration of variables for that class so that when those variables are used
within the component, they are never uninitialized. The following is an example of
constructor syntax.
Variable Declaration and Data
Initialization

9. Using External Templates
Another way to incorporate templates and stylesheets into Angular components is
through a separate file. Using this method is handy because it helps you separate
what the files do. It also makes the component easier to read. Under your
@Component decorator, you place the keyword templateUrl followed by the path
from the root of the application to your template HTML file. Here is an example.
External Styling
External HTML Template

10. External Style
External
HTML
app.component.t
s
app.component.ht
ml
app.component.cs
s

11. <div class="container"> <!-- Content here --> </div>
Bootstrap 5

12. Responsive containers:
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is
reached, after which we apply max-widths for each of the higher breakpoints.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Responsive containers:
Use .container-fluid for a full width container, spanning the entire width of the viewport
<div class="container-fluid"> ... </div>
Bootstrap 5 Grid Basic (w3schools.com)
https://github.com/twbs/bootstrap/releases/download/v5.0.2/bootstrap-5.0.2-examples.zip
References:

13. Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column
system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes
The above example creates three equal-width columns across all devices and viewports using our
predefined grid classes. Those columns are centered in the page with the parent .container.

16. Bootstrap 5
(12 Column)

17. Single Page Application (SPA)
Navigation is one of the important aspect in a web application. Even though a
single page application (SPA) does not have multiple page concept, it does
moves from one view to another view.
Angular provides extensive set of navigation feature to accommodate simple
scenario to complex scenario. The process of defining navigation element and
the corresponding view is called Routing. Angular provides a separate module,
RouterModule to set up the navigation in the Angular application.

18. View 1
View 2
View 3
View 4

19. Procedure
Step 1: Create New Angular Project with Routing Option
ng new spa
After run this command, terminal will ask you for creating route module and you
need to make yes.
Step 2: After installed successfully app, install bootstrap for your application and
configure accordingly.
Step 3: Update app.component.html file with Header Content (navbar) and Router
Outlet tag

20. <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Single Page Application (SPA)</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/posts">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container">
<router-outlet></router-outlet>
</div>
app.component.html

21. Step 4: Create two component one for home and another for post. So let's run
following command to create two component:
ng g c home
ng g c posts
ng g c posts/post-create (Child Component)
ng g c posts/post-detail (Child Component)
Step 5: After generating successfully both of component, create simple route using
both of component, so let's change on route module file:

23. Step 6: Add Content in Components and Child Components

24. Step 7: Run the Project
ng serve -o

25. Data Binding
Data binding is the process of linking data from a component with what is displayed in a web
page. When data in the component changes, the UI rendered to the user is automatically
updated.
Types of Data Binding:
1. Interpolation: Use double curly braces {{Variable}} to get values directly from the Component
class.
2. Property binding: You can use this type of binding to set the property of an HTML element.
3. Event binding: You can use this type of binding to handle user inputs.
4. Attribute binding: This type of binding allows the setting of attributes to an HTML element.
5. Class binding: You can use this type of binding to set CSS class names to the element.
6. Style binding: You can use this type of binding to create inline CSS styles for the element.
7. Two-way binding: You can use this type of binding with data entry forms to receive and

26. String Interpolation

27. Property Binding

28. Event Binding
app.component.ht
ml
app.component.ts

29. Attribute Binding

30. Class Binding

31. Style Binding

32. Two-way Binding

33. Dr. Rambabu Palaka
Professor
School of Engineering
Malla Reddy University, Hyderabad
Mobile: +91-9652665840
Email: drrambabu@mallareddyuniversity.ac.in
Reference:
Node.js, MongoDB and Angular Web Development
by Brad Dayley, Brenden Dayley, Caleb Daley