Try like this : this.http.get(‘app/files/1.txt’).subscribe(data => { console.log(data.text()); }) The CLI can’t access docments inside the app directory your project. if you move to text document you can access the text file like assets/1.txt. if you want to access document inside the app directory you need to add path in assets array in the .angular-cli.json … Read more
Now, you don’t need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526 Example from repo : <input [ngControl]=”fullName” pattern=”[a-zA-Z ]*”> I test it and it works 🙂 – here is my code: <form (ngSubmit)=”onSubmit(room)” #roomForm=’ngForm’ > … <input id=’room-capacity’ type=”text” class=”form-control” [(ngModel)]=’room.capacity’ … Read more
Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected. What you can do is to copy the array after each update insertIds(id:any) { this.metaIds.push(id); this.metaIds = this.metaIds.slice(); } or use IterableDiffer to check for changes inside InputComponent in ngDoCheck like NgFor does.
Bootstrap4 alpha for Angular2 CLI (also works for Angular4 CLI) If you are using the angular2 cli/angular 4 cli do following: npm i bootstrap@next –save This will add bootstrap 4 to your project. Next go to your src/style.scss or src/style.css file and import bootstrap there: For style.css /* You can add global styles to this … Read more
Since CommonModule does not export it as a provider you’ll have to do it yourself. This is not very complicated. 1) Import DatePipe: import { DatePipe } from ‘@angular/common’; 2) Include DatePipe in your module’s providers: NgModule({ providers: [DatePipe] }) export class AppModule { } or component’s providers: @Component({ selector: ‘home’, styleUrls: [‘./home.component.css’], templateUrl: ‘./home.component.html’, … Read more
With the latest CLI, inside angular.json “test”: { “builder”: “@angular-devkit/build-angular:karma”, “options”: { “main”: “src/test.ts”, “polyfills”: “src/polyfills.ts”, “tsConfig”: “src/tsconfig.spec.json”, “karmaConfig”: “./karma.conf.js”, “codeCoverageExclude”: [“src/testing/**/*”],
You can get the ViewContainerRef of the current component by or from an element in the view of the current component @Component({ selector: ‘…’, directives: [OtherComponent, FooComponent], template: ` <other-component></other-component> <foo-component #foo></foo-component> <div #div></div>` }) export class SomeComponent { // `ViewContainerRef` from an element in the view @ViewChild(OtherComponent, {read: ViewContainerRef}) other; @ViewChild(‘foo’, {read: ViewContainerRef}) foo; … Read more
[style.background-color]=”activity.status == ‘Pending’ ? ‘red’ : ‘green'” or [ngStyle]=”{‘backgroundColor’: activity.status == ‘Pending’ ? ‘red’ : ‘green’ }” For your rendering result see also In RC.1 some styles can’t be added using binding syntax
If you want to change the theme’s background color for the entire app in a clean way, you can override your theme with the following. // Set custom background color $custom-background-color: map_get($mat-blue-grey, 50); // -or- Can set colour by hex value too $custom-background-color: #628cc9; $background: map-get($theme, background); $background: map_merge($background, (background: $custom-background-color)); $theme: map_merge($theme, (background: $background)); … Read more
ngModel is a directive that allows your input to participate in a form (but works also without a form) value is a property you can bind a value to with [value]=”name” while (valueChange)=”…” doesn’t work, because the <input> element doesn’t have an @Output() valueChange; therefore [(value)]=”…” is invalid. [(ngModel)]=”name” is the shorthand for [ngModel]=”name” (ngModelChange)=”name … Read more