SlideShare a Scribd company logo
Create an Angular application called assignment3 using the CLI. When creating the app, use the
default options to select routing and css.ls Once the Assignment3 application is created
successfully: Create a component called header Create a component called main header
component In the Typescript file (.ts) add the following properties name campus login Id
Assign the values of the name, campus, login, id property to your name, campus, login and id In
the html file of the header component Create a paragraph Use string interpolation to display the
login, name and campus in the paragraph using the properties defined in the .ts file Example:
jsmith - John Smith - Trafalgar Update the css of the header component to align the text to
center App.component.html Delete the content to app.component.html template Add the header
component element to the template Add the main component to the template main component
In the main.component.css,Add the following CSS /* main component CSS */ .gridArea {
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas:
"shopping listArea"; gap: 10px; } .common {background-color: bisque; border: thick solid navy;
padding: 10px; margin: 10px; } .imgArea {grid-area: imgArea; text-align: center;} .listArea
{grid-area: listArea;} In the main.component.ts, in the MainComponent class Create a property
called shoppingItem of type string Create a property called shoppingList which is an array of
string In the constructor set the default values as follows: constructor() {
this.shoppingList=["eggs","milk","bread"]; this.shoppingItem=""; } Create a method called
addItem() When this method is executed it should add the shoppingItem to the shoppingList It
should set shoppingItem to an empty string Create a method called clearList() When this
method is executed It should remove all items from the shoppingList array In the
main.component.html create a section with a class of gridArea create a div under the section.
The div should have 2 classes: shopping and common Create a heading3 with the text Add a
Shopping Item Create an input field with a 2-way-data-binding to a property called
shoppingItem Create a span that displays the shoppingItem using interpolation Create a button
next to the input field with the title Add to List The button should have a click event binding to a
method called addItem(). When this button is clicked, it should save the text that was entered in
the input field into the shoppingList array It should then clear the content of the input field If
the input field is empty, the button should be disabled Create a second button next to the first
one with the title Remove All The button should have a click event binding to a method called
clearList() When this button is clicked, it should remove all the items from the shoppingList
array When the shoppingList array is empty, this button should be disabled Create another div
under the section, the div should have 2 classes: listArea and common Create a heading3 called
ShoppingList When there are more than 3 items in the shoppingList, set the colour of the h3 to
be different colour by using ngStyle Create a unordered list The items in this list should come
from shoppingList property defined in the ts file Loop through the shoppingList using directive
When the list items are rendered it should use a pipe to show the first letter in uppercase
Directives API docs : https://angular.io/api?type=directive

More Related Content

Similar to Create an Angular application called assignment3 using the CLI. When.pdf

Program Specifications in c++ Develop an inventory management system f.docx
Program Specifications in c++ Develop an inventory management system f.docxProgram Specifications in c++ Develop an inventory management system f.docx
Program Specifications in c++ Develop an inventory management system f.docx
sharold2
 
Program Specifications in c++ Develop an inventory management syste.docx
Program Specifications in c++    Develop an inventory management syste.docxProgram Specifications in c++    Develop an inventory management syste.docx
Program Specifications in c++ Develop an inventory management syste.docx
sharold2
 
Chapter09
Chapter09Chapter09
Chapter09
Sreenivasan G
 
I am having trouble writing the individual files for part 1, which i.pdf
I am having trouble writing the individual files for part 1, which i.pdfI am having trouble writing the individual files for part 1, which i.pdf
I am having trouble writing the individual files for part 1, which i.pdf
mallik3000
 
Html forms
Html formsHtml forms
Html forms
eShikshak
 
Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6
larsonsb
 
Day 4: Android: UI Widgets
Day 4: Android: UI WidgetsDay 4: Android: UI Widgets
Day 4: Android: UI Widgets
Ahsanul Karim
 
Day 5: Android User Interface [View Widgets]
Day 5: Android User Interface [View Widgets]Day 5: Android User Interface [View Widgets]
Day 5: Android User Interface [View Widgets]
Ahsanul Karim
 
A. Lab # BSBA BIS245A-7B. Lab 7 of 7 Database Navigation.docx
A. Lab #  BSBA BIS245A-7B. Lab 7 of 7  Database Navigation.docxA. Lab #  BSBA BIS245A-7B. Lab 7 of 7  Database Navigation.docx
A. Lab # BSBA BIS245A-7B. Lab 7 of 7 Database Navigation.docx
ransayo
 
Android User Interface: Basic Form Widgets
Android User Interface: Basic Form WidgetsAndroid User Interface: Basic Form Widgets
Android User Interface: Basic Form Widgets
Ahsanul Karim
 
Pedoman Pembuatan Sebuah Aplikasi
Pedoman Pembuatan Sebuah AplikasiPedoman Pembuatan Sebuah Aplikasi
Pedoman Pembuatan Sebuah Aplikasi
miftah jannah
 
M02 un11 p02
M02 un11 p02M02 un11 p02
M02 un11 p02
Intan Jameel
 
Binding to multiple datasources on a single xPage
Binding to multiple datasources on a single xPageBinding to multiple datasources on a single xPage
Binding to multiple datasources on a single xPage
dominion
 
Html,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tagsHtml,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tags
JeirahTigas
 
For this project your task is to update the RSS Reader program you w.pdf
For this project your task is to update the RSS Reader program you w.pdfFor this project your task is to update the RSS Reader program you w.pdf
For this project your task is to update the RSS Reader program you w.pdf
fathimahardwareelect
 
Html Forms.ppt
Html Forms.pptHtml Forms.ppt
Html Forms.ppt
MAHASWETAMANDAL1
 
show code and all classes with full implementation for these Program S.pdf
show code and all classes with full implementation for these Program S.pdfshow code and all classes with full implementation for these Program S.pdf
show code and all classes with full implementation for these Program S.pdf
AlanSmDDyerl
 
Implement a program in C++ a by creating a list ADT using the Object.pdf
Implement a program in C++ a by creating a list ADT using the Object.pdfImplement a program in C++ a by creating a list ADT using the Object.pdf
Implement a program in C++ a by creating a list ADT using the Object.pdf
maheshkumar12354
 
12.9 Program Online shopping cart (continued) (C++)This program e.pdf
12.9 Program Online shopping cart (continued) (C++)This program e.pdf12.9 Program Online shopping cart (continued) (C++)This program e.pdf
12.9 Program Online shopping cart (continued) (C++)This program e.pdf
fasttracksunglass
 
HTML
HTML HTML

Similar to Create an Angular application called assignment3 using the CLI. When.pdf (20)

Program Specifications in c++ Develop an inventory management system f.docx
Program Specifications in c++ Develop an inventory management system f.docxProgram Specifications in c++ Develop an inventory management system f.docx
Program Specifications in c++ Develop an inventory management system f.docx
 
Program Specifications in c++ Develop an inventory management syste.docx
Program Specifications in c++    Develop an inventory management syste.docxProgram Specifications in c++    Develop an inventory management syste.docx
Program Specifications in c++ Develop an inventory management syste.docx
 
Chapter09
Chapter09Chapter09
Chapter09
 
I am having trouble writing the individual files for part 1, which i.pdf
I am having trouble writing the individual files for part 1, which i.pdfI am having trouble writing the individual files for part 1, which i.pdf
I am having trouble writing the individual files for part 1, which i.pdf
 
Html forms
Html formsHtml forms
Html forms
 
Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6Html Xhtml And Xml 3e Tutorial 6
Html Xhtml And Xml 3e Tutorial 6
 
Day 4: Android: UI Widgets
Day 4: Android: UI WidgetsDay 4: Android: UI Widgets
Day 4: Android: UI Widgets
 
Day 5: Android User Interface [View Widgets]
Day 5: Android User Interface [View Widgets]Day 5: Android User Interface [View Widgets]
Day 5: Android User Interface [View Widgets]
 
A. Lab # BSBA BIS245A-7B. Lab 7 of 7 Database Navigation.docx
A. Lab #  BSBA BIS245A-7B. Lab 7 of 7  Database Navigation.docxA. Lab #  BSBA BIS245A-7B. Lab 7 of 7  Database Navigation.docx
A. Lab # BSBA BIS245A-7B. Lab 7 of 7 Database Navigation.docx
 
Android User Interface: Basic Form Widgets
Android User Interface: Basic Form WidgetsAndroid User Interface: Basic Form Widgets
Android User Interface: Basic Form Widgets
 
Pedoman Pembuatan Sebuah Aplikasi
Pedoman Pembuatan Sebuah AplikasiPedoman Pembuatan Sebuah Aplikasi
Pedoman Pembuatan Sebuah Aplikasi
 
M02 un11 p02
M02 un11 p02M02 un11 p02
M02 un11 p02
 
Binding to multiple datasources on a single xPage
Binding to multiple datasources on a single xPageBinding to multiple datasources on a single xPage
Binding to multiple datasources on a single xPage
 
Html,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tagsHtml,Css and Javascript Forms using different tags
Html,Css and Javascript Forms using different tags
 
For this project your task is to update the RSS Reader program you w.pdf
For this project your task is to update the RSS Reader program you w.pdfFor this project your task is to update the RSS Reader program you w.pdf
For this project your task is to update the RSS Reader program you w.pdf
 
Html Forms.ppt
Html Forms.pptHtml Forms.ppt
Html Forms.ppt
 
show code and all classes with full implementation for these Program S.pdf
show code and all classes with full implementation for these Program S.pdfshow code and all classes with full implementation for these Program S.pdf
show code and all classes with full implementation for these Program S.pdf
 
Implement a program in C++ a by creating a list ADT using the Object.pdf
Implement a program in C++ a by creating a list ADT using the Object.pdfImplement a program in C++ a by creating a list ADT using the Object.pdf
Implement a program in C++ a by creating a list ADT using the Object.pdf
 
12.9 Program Online shopping cart (continued) (C++)This program e.pdf
12.9 Program Online shopping cart (continued) (C++)This program e.pdf12.9 Program Online shopping cart (continued) (C++)This program e.pdf
12.9 Program Online shopping cart (continued) (C++)This program e.pdf
 
HTML
HTML HTML
HTML
 

More from ameerandsons

Culturas de mercado A) Empoderar a los empleados para que asuman .pdf
Culturas de mercado A) Empoderar a los empleados para que asuman .pdfCulturas de mercado A) Empoderar a los empleados para que asuman .pdf
Culturas de mercado A) Empoderar a los empleados para que asuman .pdf
ameerandsons
 
Current Event #2 - summarize a recent business article from a source.pdf
Current Event #2 - summarize a recent business article from a source.pdfCurrent Event #2 - summarize a recent business article from a source.pdf
Current Event #2 - summarize a recent business article from a source.pdf
ameerandsons
 
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdfcultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
ameerandsons
 
Cryptography13.Consider the following matrix with entries from E,.pdf
Cryptography13.Consider the following matrix with entries from E,.pdfCryptography13.Consider the following matrix with entries from E,.pdf
Cryptography13.Consider the following matrix with entries from E,.pdf
ameerandsons
 
Cuatro tendencias principales que afectan el comercio mundial a prin.pdf
Cuatro tendencias principales que afectan el comercio mundial a prin.pdfCuatro tendencias principales que afectan el comercio mundial a prin.pdf
Cuatro tendencias principales que afectan el comercio mundial a prin.pdf
ameerandsons
 
Cuando una encuesta mide el compromiso de los empleados de una organ.pdf
Cuando una encuesta mide el compromiso de los empleados de una organ.pdfCuando una encuesta mide el compromiso de los empleados de una organ.pdf
Cuando una encuesta mide el compromiso de los empleados de una organ.pdf
ameerandsons
 
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdfCuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
ameerandsons
 
Cuando una empresa instala filiales que producen algunos de los insu.pdf
Cuando una empresa instala filiales que producen algunos de los insu.pdfCuando una empresa instala filiales que producen algunos de los insu.pdf
Cuando una empresa instala filiales que producen algunos de los insu.pdf
ameerandsons
 
Cuando un proceso no est� bajo control que significa No est� haci.pdf
Cuando un proceso no est� bajo control que significa No est� haci.pdfCuando un proceso no est� bajo control que significa No est� haci.pdf
Cuando un proceso no est� bajo control que significa No est� haci.pdf
ameerandsons
 
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdfCuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
ameerandsons
 
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdfCuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
ameerandsons
 
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdfCuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
ameerandsons
 
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdfCuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
ameerandsons
 
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdfCuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
ameerandsons
 
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdfCuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
ameerandsons
 
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdfCuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
ameerandsons
 
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdfCualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
ameerandsons
 
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdfCS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
ameerandsons
 
Cross-cultural industrial and organizational psychology. Citation Tr.pdf
Cross-cultural industrial and organizational psychology. Citation Tr.pdfCross-cultural industrial and organizational psychology. Citation Tr.pdf
Cross-cultural industrial and organizational psychology. Citation Tr.pdf
ameerandsons
 
Cryptography is designed to turn information into a format that is d.pdf
Cryptography is designed to turn information into a format that is d.pdfCryptography is designed to turn information into a format that is d.pdf
Cryptography is designed to turn information into a format that is d.pdf
ameerandsons
 

More from ameerandsons (20)

Culturas de mercado A) Empoderar a los empleados para que asuman .pdf
Culturas de mercado A) Empoderar a los empleados para que asuman .pdfCulturas de mercado A) Empoderar a los empleados para que asuman .pdf
Culturas de mercado A) Empoderar a los empleados para que asuman .pdf
 
Current Event #2 - summarize a recent business article from a source.pdf
Current Event #2 - summarize a recent business article from a source.pdfCurrent Event #2 - summarize a recent business article from a source.pdf
Current Event #2 - summarize a recent business article from a source.pdf
 
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdfcultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
cultura y diversidad 1. Paralenguaje se refiere a a. Contacto vi.pdf
 
Cryptography13.Consider the following matrix with entries from E,.pdf
Cryptography13.Consider the following matrix with entries from E,.pdfCryptography13.Consider the following matrix with entries from E,.pdf
Cryptography13.Consider the following matrix with entries from E,.pdf
 
Cuatro tendencias principales que afectan el comercio mundial a prin.pdf
Cuatro tendencias principales que afectan el comercio mundial a prin.pdfCuatro tendencias principales que afectan el comercio mundial a prin.pdf
Cuatro tendencias principales que afectan el comercio mundial a prin.pdf
 
Cuando una encuesta mide el compromiso de los empleados de una organ.pdf
Cuando una encuesta mide el compromiso de los empleados de una organ.pdfCuando una encuesta mide el compromiso de los empleados de una organ.pdf
Cuando una encuesta mide el compromiso de los empleados de una organ.pdf
 
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdfCuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
Cuenta Saldo 31122013 Saldo 31122014 Depreciaci�n acumulada $2.pdf
 
Cuando una empresa instala filiales que producen algunos de los insu.pdf
Cuando una empresa instala filiales que producen algunos de los insu.pdfCuando una empresa instala filiales que producen algunos de los insu.pdf
Cuando una empresa instala filiales que producen algunos de los insu.pdf
 
Cuando un proceso no est� bajo control que significa No est� haci.pdf
Cuando un proceso no est� bajo control que significa No est� haci.pdfCuando un proceso no est� bajo control que significa No est� haci.pdf
Cuando un proceso no est� bajo control que significa No est� haci.pdf
 
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdfCuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
Cuando un proyectil (una roca del espacio, digamos) golpea la superf.pdf
 
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdfCuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
Cuando se trata de evaluaciones de desempe�o, los supervisores y los.pdf
 
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdfCuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
Cuando los lobos regresaron por primera vez a Yellowstone, las pobla.pdf
 
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdfCuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
Cuando Joe maximiza la utilidad, encuentra que su MRS de X por Y (o .pdf
 
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdfCuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
Cuando el suministro es de inter�s p�blico Roche y Tamiflu El caso .pdf
 
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdfCuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
Cuando escuchas la palabra liderazgo, �qu� te viene a la mente Co.pdf
 
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdfCuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
Cuando el fago lambda de tipo salvaje se sembra en placas en un c�sp.pdf
 
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdfCualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
Cualquier ayuda es bienvenida. Jayne Butterfield, una madre solter.pdf
 
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdfCS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
CS520 Computer Architecture Project 2 � Spring 2023 Due date 0326.pdf
 
Cross-cultural industrial and organizational psychology. Citation Tr.pdf
Cross-cultural industrial and organizational psychology. Citation Tr.pdfCross-cultural industrial and organizational psychology. Citation Tr.pdf
Cross-cultural industrial and organizational psychology. Citation Tr.pdf
 
Cryptography is designed to turn information into a format that is d.pdf
Cryptography is designed to turn information into a format that is d.pdfCryptography is designed to turn information into a format that is d.pdf
Cryptography is designed to turn information into a format that is d.pdf
 

Recently uploaded

The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
heathfieldcps1
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
David Douglas School District
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
taiba qazi
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
TechSoup
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
NgcHiNguyn25
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
RitikBhardwaj56
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
Celine George
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
Types of Herbal Cosmetics its standardization.
Types of Herbal Cosmetics its standardization.Types of Herbal Cosmetics its standardization.
Types of Herbal Cosmetics its standardization.
Ashokrao Mane college of Pharmacy Peth-Vadgaon
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
Celine George
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
Scholarhat
 

Recently uploaded (20)

The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
Pride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School DistrictPride Month Slides 2024 David Douglas School District
Pride Month Slides 2024 David Douglas School District
 
DRUGS AND ITS classification slide share
DRUGS AND ITS classification slide shareDRUGS AND ITS classification slide share
DRUGS AND ITS classification slide share
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
Types of Herbal Cosmetics its standardization.
Types of Herbal Cosmetics its standardization.Types of Herbal Cosmetics its standardization.
Types of Herbal Cosmetics its standardization.
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
 

Create an Angular application called assignment3 using the CLI. When.pdf

  • 1. Create an Angular application called assignment3 using the CLI. When creating the app, use the default options to select routing and css.ls Once the Assignment3 application is created successfully: Create a component called header Create a component called main header component In the Typescript file (.ts) add the following properties name campus login Id Assign the values of the name, campus, login, id property to your name, campus, login and id In the html file of the header component Create a paragraph Use string interpolation to display the login, name and campus in the paragraph using the properties defined in the .ts file Example: jsmith - John Smith - Trafalgar Update the css of the header component to align the text to center App.component.html Delete the content to app.component.html template Add the header component element to the template Add the main component to the template main component In the main.component.css,Add the following CSS /* main component CSS */ .gridArea { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "shopping listArea"; gap: 10px; } .common {background-color: bisque; border: thick solid navy; padding: 10px; margin: 10px; } .imgArea {grid-area: imgArea; text-align: center;} .listArea {grid-area: listArea;} In the main.component.ts, in the MainComponent class Create a property called shoppingItem of type string Create a property called shoppingList which is an array of string In the constructor set the default values as follows: constructor() { this.shoppingList=["eggs","milk","bread"]; this.shoppingItem=""; } Create a method called addItem() When this method is executed it should add the shoppingItem to the shoppingList It should set shoppingItem to an empty string Create a method called clearList() When this method is executed It should remove all items from the shoppingList array In the main.component.html create a section with a class of gridArea create a div under the section. The div should have 2 classes: shopping and common Create a heading3 with the text Add a Shopping Item Create an input field with a 2-way-data-binding to a property called shoppingItem Create a span that displays the shoppingItem using interpolation Create a button next to the input field with the title Add to List The button should have a click event binding to a method called addItem(). When this button is clicked, it should save the text that was entered in the input field into the shoppingList array It should then clear the content of the input field If the input field is empty, the button should be disabled Create a second button next to the first one with the title Remove All The button should have a click event binding to a method called clearList() When this button is clicked, it should remove all the items from the shoppingList array When the shoppingList array is empty, this button should be disabled Create another div under the section, the div should have 2 classes: listArea and common Create a heading3 called ShoppingList When there are more than 3 items in the shoppingList, set the colour of the h3 to be different colour by using ngStyle Create a unordered list The items in this list should come
  • 2. from shoppingList property defined in the ts file Loop through the shoppingList using directive When the list items are rendered it should use a pipe to show the first letter in uppercase Directives API docs : https://angular.io/api?type=directive