Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html.
I attempted to implement
styles: ['label { font-weight: bold;color:red }']Although aware of using
styleUrls: [ '../css/contact.component.css' ]If anyone has suggestions as to why the effects are not being displayed on the views, please let me know!
@Component({
moduleId: module.id,
selector: 'app-contact',
templateUrl: '../views/contact.component.html',
styles: ['label { font-weight: bold;color:red }']
})
Contact.component.html:
<h2 highlight>Contact of {{userName}}</h2>
<h2 myHighlight>This is custom my directive</h2>
<div *ngIf="msg" class="msg">{{msg}}</div>
<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
<h3 >{{ contact.name | awesome }}</h3>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" required [(ngModel)]="contact.name" name="name" #name="ngModel" >
<div [hidden]="name.valid" class="alert alert-danger">Name is required </div>
</div>
<div class="form-group">
<label for="EmailId">Email</label>
<input type="email" class="form-control" required [(ngModel)]="contact.email" name="email" #email="ngModel">
<div [hidden]="email.valid" class="alert alert-danger">email is required </div>
</div>
<button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
</form>
Check out the snapshot: