To switch between the three layouts, all we need to do is to change the value of a variable layoutStyle. It’s as simple as that. The default value is 'dialog'.

layoutStyle = 'dialog' | 'tabs' | 'newPage'

Layout style 1: Contact update in a dialog

Layout style 2: Contact update in a new tab

Layout style 3: Contact update in a new page with go-back button

We will use the container-presenter design pattern and benefit from components inheritance, content projection, and some of the cool features of Angular Core and Angular template system (ng-template, ng-container, ngTemplateOutlet) to achieve our goal. Let’s start by introducing the ng-template directive that allows a flexible layout system.

#angular #javascript #software #ux