As we could easily see, one of the most important things to do in order to de-uglify our components is applying the default Bootstrap classes to our <input type="button">, <input type="submit">, <button>, and <a> elements. Let's take the following template:

[...]

<div *ngIf="questions.length == 0">
    This quiz has no questions (yet):
    click the <strong>Add a new Question</strong> button to add the first one!
</div>
<input type="button"
       value="Add a new Question"
       (click)="onCreate()"
       class="btn btn-sm btn-primary" 
       />

The above code is taken from the question-list.component.html template file: as we can see, we're using the btn-sm and btn-primary button classes here, as we want the button to be smaller than the Apply Changes and Cancel main buttons within the parent component; for buttons and button-like links placed within a table row it's generally wise to use the btn-xs class to save even more space.

Also, as per our internal convention, we're going to use the btn-primary class when adding something new, btn-warning and btn-danger for edit and delete operations and btn-success for saving our stuff; that said, you're free to change it and do as you wish: just remember that repeating the same colors for the same editing tasks will greatly help our users to understand what they need to do while navigating through the various views.

Another thing we can do to improve our button's look and feel is decorate them with some fancy icons, just like we did a number of times already: Bootstrap allows us to easily achieve such result thanks to the Glyphicon Halfling set, a great icon library that is available free of charge--as long as we use it through Bootstrap. Using these icons is just as simple as adding a single <span> element with the appropriate glyphicon class.

If we need to do that on <input> elements, that can't contain children:

<input type="button" value="Add a new Question"
       (click)="onCreate()" class="btn btn-sm btn-primary" />

We can replace them with <button> elements in the following way:

<button (click)="onCreate()" class="btn btn-sm btn-primary">
    <span class="glyphicon glyphicon-plus-sign"></span>
    Add a new Question
</button>

Repeat these tricks for all the input and button elements throughout all the various question, answer and result control's templates and you should be good to go.