Angular2 Directive - selector with multiple ids

Question

I'm implementing a custom directive in Angular 2, directive for form validation, and in many places I see that in the directive definition the selector property is associated with multiple ids - for example:

@Directive({
    selector: '[my-custom-validator][ngModel]'
})

What does the multiple '[...]' (brackets) selection mean?

Answer 1

As in CSS, the selector [attr] matches elements that have an attribute named attr. When multiple attribute selectors are chained together, all the attributes must exist on the element.

Note: Unlike CSS, Angular ignores any [...] or [(...)] binding brackets on the target attribute when it performs the match.

Thus, the selector [my-custom-validate][ngModel] matches elements that have both a my‑custom‑validate attribute and an ngModel attribute (including [ngModel] and [(ngModel)]). For example, the selector matches

 <input type="text" name="username" my-custom-validate [(ngModel)]="model.username">

but not

 <input type="text" name="username" my-custom-validate>