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 a.