Angular 19 Tutorial in Hindi #7 Component
What is Component
What is Component in Angular
How to make and use component
Files of component
Interview Questions
. an artifact that is one of the individual parts of which a composite entity is made up; especially a part that can be separated from or attached to a system.
In Angular, a component is a fundamental building block of an application, encapsulating a specific part of the user interface (UI) and its associated logic. Think of them as self-contained, reusable units that combine to form the complete application.
<h1>Angular Components</h1>
<app-login></app-login>
<signup></signup>
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have the 'angular-19-tut' title`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('angular-19-tut');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-19-tut');
});
});
<h1 style="background-color: skyblue;" >Login Component</h1>
import { Component } from '@angular/core';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
@Component({
selector: 'app-root',
imports: [LoginComponent,SignupComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
name="Anil Sidhu";
data=100;
data2=100;
user1="anil";
user2="anil";
}