Angular App using Components

📌 INTRODUCTION

Components are the building blocks of an Angular application. Every Angular app is made up of one or more components.

A component controls:

• A part of the user interface
• The logic behind that part
• The template displayed to the user

In this program, we will create an Angular application using multiple components.

👉 This helps students understand:

• Component creation
• Component usage
• Parent-child structure in Angular

---

📘 PROBLEM STATEMENT

👉 Create an app using Angular that displays a web page using components.

---

💡 CONCEPTS USED

• Angular Components
• Angular CLI
• Component selector
• Template rendering
• Parent and child components

---

🧠 LOGIC EXPLANATION

The application works in the following way:

1. Create a new Angular project
2. Create an additional component
3. Define content in that component
4. Use the component selector inside the main app component
5. Display the web page in browser

---

⚙️ STEP 1: CREATE ANGULAR PROJECT

Open terminal and run:

ng new components-app
cd components-app
ng serve

Now open:

http://localhost:4200

---

⚙️ STEP 2: GENERATE A NEW COMPONENT

Create a component named student:

ng generate component student

or shorter:

ng g c student

This creates files like:

src/app/student/
├── student.component.ts
├── student.component.html
├── student.component.css
└── student.component.spec.ts

---

💻 PROGRAM CODE

---

Step 1: student.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent {
  name = 'Kanchan';
  course = 'BCA';
  college = 'Programming Empire Institute';
}

---

Step 2: student.component.html

<div class="card">
  <h2>Student Information</h2>
  <p><strong>Name:</strong> {{ name }}</p>
  <p><strong>Course:</strong> {{ course }}</p>
  <p><strong>College:</strong> {{ college }}</p>
</div>

---

Step 3: student.component.css

.card {
  border: 1px solid #ccc;
  padding: 15px;
  width: 300px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

---

Step 4: app.component.html

Replace existing code with:

<h1 style="text-align:center;">Angular App using Components</h1>
<app-student></app-student>

---

🖥️ OUTPUT

Angular App using Components

Student Information
Name: Kanchan
Course: BCA
College: Programming Empire Institute

---

🔍 STEP-BY-STEP EXPLANATION

1. Create Component Class

export class StudentComponent {
  name = 'Kanchan';
}

This stores the data used in the template.

---

2. Use Template File

templateUrl: './student.component.html'

This connects the HTML view with the component.

---

3. Use Selector

selector: 'app-student'

This selector is used like an HTML tag:

<app-student></app-student>

---

4. Render Child Component in Parent

The main component (app.component.html) acts as parent, and student.component acts as child.

---

🎯 WHY COMPONENTS ARE IMPORTANT IN ANGULAR

Components make Angular apps:

• Modular
• Reusable
• Easy to manage
• Easy to scale

Instead of writing everything in one file, Angular divides UI into smaller reusable parts.

---

⚡ ADVANCED VERSION: ADD MULTIPLE COMPONENTS

You can create more components such as:

ng g c header
ng g c footer
ng g c about

Then use them in app.component.html:

<app-header></app-header>
<app-student></app-student>
<app-footer></app-footer>

---

⚡ EXAMPLE: HEADER COMPONENT

header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `<h2 style="text-align:center; color:blue;">Welcome to My Angular App</h2>`
})
export class HeaderComponent {}

Use in app.component.html

<app-header></app-header>
<app-student></app-student>

---

🌟 BENEFITS OF COMPONENT-BASED DESIGN

• Reusability
• Better organization
• Easier debugging
• Cleaner code
• Faster development

---

📚 REAL-WORLD USE CASE

Angular components are used in:

• Student dashboards
• Admin panels
• E-commerce websites
• Banking apps
• Profile cards
• Navigation bars
• Product sections

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is a component in Angular?

👉 A component is a part of the user interface with its own logic, template, and style.

---

Q2. Why are components used in Angular?

👉 Components help divide the application into reusable and manageable parts.

---

Q3. What is a selector in Angular?

👉 A selector is a custom HTML tag used to display a component.

---

Q4. How do you create a component in Angular?

👉 Using Angular CLI command: ng generate component component-name

---

Q5. What files are created when a new component is generated?

👉 TypeScript file, HTML file, CSS file, and spec file.

---

Q6. What is the role of templateUrl?

👉 It connects the component with its HTML template file.

---

Q7. Can one Angular app have multiple components?

👉 Yes, Angular applications usually have many components.

---

Q8. What is parent-child component relation?

👉 One component can include another component inside its template.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 Angular Hello World App – Program 23
👉 Node.js HTTP Server – Program 22

---

📌 CONCLUSION

Components are the foundation of Angular development. By learning how to create and use components, you can build structured and professional web applications.

👉 Practice creating multiple small components such as header, footer, profile card, and content section to strengthen your Angular skills.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites