Angular (5) -- Bootstrap and Debugging Tools

Day 13:

Bootstrap: margin between buttons

In normal HTML the browser inserts a 4px gap between all inline and inline-block elements by default.

But there was a change with Angular 6, which now removes these 4px gaps and other whitespace by default in Angular apps.

An option could be to wrap the buttons into a div with the class btn-toolbar, gonna let Bootstrap add the desired margins in this way.

Bootstrap: responsive image

In the image element, declare a class img-responsive can make Bootstrap adjust the image automatically for us.

col-xs-12: fill all the width

Shortcut for creating a class in TypeScript

Instead of define all the attributes and then making a constructor, we can use a simple shortcut.

export class Ingredient {
  constructor(public name: string, public amount: number) {}
}

Debugging in Chrome

Go to Sources -> webpack -> . -> go to the source ts code and set breakpoints there.

Augury debugging tool

This is a chrome extension that allows us to debug our Angular application easily.