Experiment 3

Student Name: Abhay mehta UID:17bcs4016

Branch: CSE Cloud computing Section/Group:17CSE-H (1)/Group A
th
Semester: 7 Date of Performance:17/08/2020
Subject Name: WFC (ANGULAR JS) LAB Subject Code:CSA-434

1. Aim/Overview of the practical: Apply Styles using CSS Framework in Angular

Js.

2. Task to be done:

1. Install a CSS framework

2. Stop and restart the build and web server

3. Verify styles that are working in the app

3. Steps for experiment/practical:

1.)Open Visual Studio Code and open the angular project folder in it.

2.) Enter into angular application using command:cd angular-application.

3.) Now we have to change the CSS so use command :ng generate directive highlight (to
generate he directives of highlight ,two files will be generated)
4.) In the dashboard we can see the files generated.

5.) Create constructor of el element and give background color as blue.

6.) In the browser the app will be opened.

Using Events:
1. )We can use events like onMouseEnter,onMouseLeave ,etc for designing.
2.) After using this whenever we hover our mouse over the text it’s color changes.

Using the Radio buttons for selection of desired color.

1.) In app.component.html file we can use radio button for the input of color.
2.) In highlight.directive.ts file make highlight as private so that it can only be accessed
by it’s members .

3.) In app.component.ts file set color as string which can be used by the members in
private highlight which has parameter of string.
Output of the Changed CSS Framework
1.) User is able to change the color of text accordingly.
Learning outcomes (What I have learnt):

1.Learned how we can make changes in the CSS file

2.Making changes in the Project and shooting it in browser for the changes