Over here at the Prograd Community, we have found that students like to have a way to keep track of the contacts they make during their ProGrad Journey for furture collaborations, and may be sometimes to reminisce about the good old times.
For this, we are going to create a contact management application with Angular.
You can find the starter code in the starter code folder of this github repo.
After this lesson, you will be able to:
- Create a static Angular application with Angular CLI.
- Build an Angular application with multiple component.
- You will get to know array of objects, interfaces, classes.
- Fork this repo.
- Clone this repo.
Upon completion, run the following commands:
$ git add .
$ git commit -m "done"
$ git push origin master
Navigate to your repo and create a pull request from your master branch to the original repository's master branch. In the pull request name, add your ProGrad id, name, and last name separated by a dash "-".
You need to generate the starter code and fill it with the necessary code to satisfy the requirements described below.
To generate the starter code, follow the steps given below
- To create a new application,
- Open your ubuntu or cmd terminal and execute the following command
ng new app-name
- for example, ng new super-wars
- To create a new component, execute the command
ng generate component component-name
- example, ng generate component contacts
- Open your ubuntu or cmd terminal and execute the following command
- To run the project go to your ubuntu terminal or VScode editor
- open the ubuntu or cmd terminal or inside the vscode editor
- run the command following command
ng serve --open or ng serve -o
Once you clone your project,
run the below command
npm install --save-dev @angular-devkit/build-angular
Let's take a look at the starter code.
There is a file with fake contacts called contact.ts and the collection of contacts is being exposed to the template in a variable called contacts
.
Using *ngFor
, display the name
, email
, phoneNumber
, and image
of each contact.
Currently, there's a form wired up to an [(ngModel)]
called newContact
.
When a user clicks the button below this form, it's supposed to be calling a function called addContact
. Look carefully at the following line and see if you can detect the bug:
<!-- contact-list.component.html -->
<button (click)="addContact">Submit New Contact</button>
Then, finish the function inside of the component that adds the contact to the list of contacts:
addContact(){
// add contact to contacts list
// clear inputs
}
Unfortunately, our contacts list isn't really ready. May be we could style it a little before to finish off.
Remember these rules while styling: you can add a global stylesheet in your index.html
and apply component specific styles in the .component.css
files.
Happy Coding ProGrad ❤️!