Component development¶

The expected state of the application after the end of the "Project structure" section: [get code]

Let's create a new component to display the student list. The command to generate components using CLI is as follows:

ng generate component <component-name> [options]
# Short version
ng g component <component-name> [options]

The list of available options for this command is available here. However, we will not use them within this block.

So we can quickly generate the Students component by typing:

ng generate component Students

This command will create a new folder with four files:

CREATE src/app/students/students.component.css (0 bytes)
CREATE src/app/students/students.component.html (23 bytes)
CREATE src/app/students/students.component.spec.ts (642 bytes)
CREATE src/app/students/students.component.ts (283 bytes)

UPDATE src/app/app.module.ts (404 bytes)

Let's go ahead and check each of these files. They will look similar to previously known application components. Note however the ngOnInit() method inside the students.components.ts file. This is one of the lifecycle's hooks. Angular calls this method right after running the component. This is a good place to introduce the initialization logic.

Let's add our new component to the main component of the application. Go to src/app/app.component.html and insert between the<main>tag:

<app-students></app-students>

If we have a ng serve process running, it should automatically update the page and print "students works!".

The template for the Students component¶

Mere "students works!" is not very useful. Let's change that by adding HTML that will represent our student list. Let's go to the file src/app/students/students.component.html and paste the following HTML code:

<section>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Name and surname</th>
        <th>E-mail address</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Smith</td>
        <td><a href="mailto:john@smith.com">john@smith.com</a></td>
        <td>
          <a href="#" class="button button-green">Edit</a>
          <button class="button button-red">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</section>

Application styling¶

Items such as tables and buttons in the * Students * view can repeat over and over again throughout the application. Therefore, it doesn't make sense to style these elements only in the [CSS] (../../HTML_CSS_JS/CSS/introduction.md) file associated with a specific (students.component.css) component. A much better option is to use the global style sheet available in the src/styles.css file. It is in this file that all universal selectors and their properties should be included, e.g. those regarding the background, font, etc. Open this file and make the appropriate changes for the background, table and buttons with red and green highlighting (class button-red and button-green).

Sample content of src/styles.css:

/* Set the box-sizing property for all items */
* {
  box-sizing: border-box;
}

/* Properties for body */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Container class that is limited in width and centers content */
/* Setting the left and right margins to "auto" centers the container */
.container {
  margin: auto 20px;
  width: 100%;
}

/* Tables */
table {
  width: 100%;
}
table th,
table td {
  padding: 8px;
  text-align: left;
}
/* We shade every second (even) row of the table */
/* We use tbody to make sure we are not shading the header - this preserves the order of the shading */
table tbody > tr:nth-child(odd) {
  background: #dddddd;
}

/* Buttons */
.button {
  display: inline-block;
  margin: 2px 0;
  padding: 12px 30px 14px;
  border: 0;
  background: #999999;
  border-radius: 6px;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
/* Button on mouse hover*/
.button:hover {
  background: #888888;
}
/* Button in active state */
.button:active,
.button:focus {
  background: #777777;
}

/* Green button */
.button-green {
  background: #33cc55;
}
.button-green:hover {
  background: #22bb44;
}
.button-green:active,
.button-green:focus {
  background: #22aa44;
}

/* Red button */
.button-red {
  background: #dd3333;
}
.button-red:hover {
  background: #cc2222;
}
.button-red:active,
.button-red:focus {
  background: #bb2222;
}

/* Media Query for devices with a minimum width of 992px */
/* ie for desktop computers */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

Note the box-sizing: border-box property which is set for all HTML elements. This property makes creating CSS layouts easier and more intuitive, and so because it ensures that inside margins and borders do not increase the width and height of the elements. This feature is described in detail in the chapter on box model.

At the end of the sample CSS file, the Media Query rule was also used, which is used to load styles depending on the type of device or the available width of the browser window. This allows us to adjust the website to the size of the user's device. Detailed information about this rule can be found here.