angular2-template

问题 I would like to display the below snippet in my html page. I'm using angular 2. {path: 'test', component: TestComponent} I've added below in my template to achieve this: <pre> <code>{path: 'test', component: TestComponent}</code> </pre> When I load the template, I see below error. How do I fix this? Can't I use code tag? directive_normalizer.js:127 Uncaught Error: Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

问题 I have this component definition in typescript: import {Component, ViewEncapsulation} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/views/sandbox.html', styleUrls: ['/styles/sandbox.css'], styles: [`.wow { background-color: red; }`], encapsulation: ViewEncapsulation.Emulated }) export class SandBox { } According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html both the style in the styles section and in the external

问题 I have this component definition in typescript: import {Component, ViewEncapsulation} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/views/sandbox.html', styleUrls: ['/styles/sandbox.css'], styles: [`.wow { background-color: red; }`], encapsulation: ViewEncapsulation.Emulated }) export class SandBox { } According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html both the style in the styles section and in the external

问题 I have the next component which is a time input @Component({ selector: 'time-cell', template: `<input #input [ngModel]="value" (ngModelChange)="onModelChange($event)" placeholder="00:00">`, encapsulation: ViewEncapsulation.None }) export class TimeCellEditorComponent implements AgEditorComponent, AfterViewInit { value: string; private oldValue: string; private onValueChangeSubject: Subject<string>; private timeSplitRegExp: RegExp = /^\s*([01]?\d|2[0-3])(:?([0-5]\d))?\s*$/; private

问题 I have now One AppModule which has a number of components and one AppCompoennt which is the template componnet with the router-outlet directive. I want in some way create an AuthModule which has its own template AuthComponent between Login, Register Components. When user has logged in it should navigate to the HomeComponent which is rendering in the AppComponent in AppModule. And now the AppComponent is used as long the user is logged in. When user logout. It should navigate back to

问题 Getting error while submiting my form. login.component.html: <div class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6"> <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"> <div class="form-group"> <label>Username:</label> <input type="text" class="user name" placeholder="Enter user name" name="username" [(ngModel)]="userName"/> </div> <div class="form-group"> <label>Password:</label> <input type="password" class="password" placeholder="Enter

问题 I want to prevent mat-option from being selected because clicking on it will open a dialog. Only when selecting something from the dialog, should my option be selected. If nothing was selected from the dialog, mat-option should not be changed from previous value. <mat-select [(ngModel)]="filter_defaultSelectedValue" (change)="changeSelectedValue($event.value)"> <mat-option *ngFor="let filter of filters" [value]="filter"> <span *ngIf="filter.id != 'custom'; else content_dialog"> {{filter.label

问题 I've been staring at this for too long, and I can't figure it out. There's a good example of an Angular Material table with an expandable row in this stackoverflow answer. I can plug the example into my app, and it works correctly. I'm failing to apply the example to my data. I think my problem is in the HTML, since the table renders, the expanded row CSS seems to get applied (the row delineation disappears on clicking the first row), but the expansion row does not appear. Does anyone see the

问题 I am unable to access a property of an object provided by the async pipe if I build the access chain using *ngFor. In the example below, suppose that Parking in the test line and the ?.[filter.propName] two lines beneath represent the same key on the same object. The test line will evaluate to true, but the checked property does not. Why? How do I access the propery when stamping these out with *ngFor? For example, if {{(compModel | async)?.Parking?.Garage}} === true I would expect {{

问题 I am trying to hide some Content in in the UI using *ngif of angular4 its not working properly. can anybody help me on this. its value is not changing in the other component. Navbar Template: <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav ml-auto mt-2 mt-md-0"> <li class="nav-item active"> <a class="nav-link" href="#">Dashboard</a> </li> <div *ngIf="saveSpinner==true" class="dropdown notificatio-dropdown"> <li> <a href="#" class="dropdown-toggle" data