Angular 19 Tutorial in Hindi #14 Style Option and Rules
Component Style
Global Style
Make New file for global Style
Internal style
Style in Component.ts file
Load multiple css files in component
Interview Questions
<style>
h2{
color: orange;
background-color: #000;
}
</style>
<hr>
<app-user></app-user>
<hr>
<h1>Style Rules and Option</h1>
<app-profile></app-profile>
<h1>Heading 2</h1>
<h2>Heading Tag 2</h2>
<h2>Apple</h2>
<h3 style="background-color: gold; color: #000; font-size: 50px;" >
This is heading 3
</h3>
import { Component, signal } from '@angular/core';
import { ProfileComponent } from './profile/profile.component';
import { UserComponent } from './user/user.component';
@Component({
selector: 'app-root',
imports: [ProfileComponent,UserComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
}
<h1>Profile Component</h1>
<button>Logout</button>
h1{
background-color: skyblue;
color: wheat;
}
h1{
padding: 10px;
border: 1px solid green;
}
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-19-tut": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/angular-19-tut",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/theme.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "angular-19-tut:build:production"
},
"development": {
"buildTarget": "angular-19-tut:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
}
}