Angular Structural Directives

Angular structural directives allow us to change the DOM structure (hence the name). In Angular, we use the *ngIf as a structural directive. Basically, if it evaluates to ‘true’, then the element is inserted into the DOM. If it is ‘false’, the element is removed.

@Component({
    selector: 'app-structure',
    template: `
        <div *ngIf='displayContent'>
            Content
        </div>
    `
})

export class AppStructureComponent {
    displayContent = true;
}

The above div would be inserted into the template’s DOM structure.

We can also use *ngFor, which allows us to use looping logic for DOM structure.

@Component({
    selector: 'app-structure',
    template: `
        <div class='row' *ngFor='let i of data'>
            {{i.someData}}
        </div>
    `
})

export class AppStructureComponent {
    data = [
        {
            someData: 'foo',
            someData: 'bar'
        }
    ];
}

Happy Coding!

Clay Hess