Angular Front End Development using app.component.html and app.component.css
Algorithm
Step 1: create an angular project named hello using the below command in CMD
ng new hello
Step 2: Open Visual Studio code and add your project as a folder in it
Step 3: Now open src folder of your project this folder contains the source code of your angular project.
Step 4: In src folder go to app folder which contains the bootstrapping codes of angular application
Step 5: Inside app folder you find three important files they are
a) app.component.html: This is the basic HTML file of your angular application
b)app.component.css: This CSS file will provide the basic styling to app.component.html
c)app.component.ts: This is a type script file that provides functionality to app.component.html.
Step 6: open app.component.html and write the below code:
<marquee id="blue">Welcome to Angular</marquee>
<h1 align="center "id="head">Angular</h1>
<p id="para">Angular uses TypeScript to provide functionality</p>
Step 7:open app.component.css and write the below code
#blue{
color:whitesmoke;
font-size: 50px;
background-color:blue;
}
#head{
background-color:coral;
color:white;
}
#para{
background-color: gold;
color:antiquewhite;
}
step 8: After saving both the files open CMD and redirect to project directory
cd hello
step 9: Now run the angular project using the below command
ng serve --open
Post a Comment