If you’re using the default Angular2 tsconfig.json with SystemJS loader: “module”: “system”, “moduleResolution”: “node”, … You can leave all the heavy work on SystemJS Build Tool. This is for example how I do it in my projects using gulp: Compile *.ts and inline *.html templates I’m using gulp-angular-embed-templates right away to inline all templateUrl into … Read more
I made a version that uses character length rather than div size. import { Component, Input, ElementRef, OnChanges} from ‘@angular/core’; @Component({ selector: ‘read-more’, template: ` <div [innerHTML]=”currentText”> </div> <a [class.hidden]=”hideToggle” (click)=”toggleView()”>Read {{isCollapsed? ‘more’:’less’}}</a> ` }) export class ReadMoreComponent implements OnChanges { @Input() text: string; @Input() maxLength: number = 100; currentText: string; hideToggle: boolean = true; … Read more
yups as said by @simon error is in imports. but for further imports i have posted this answer may be this is useful for others too. import {Component, View, Directive, Input, Output, Inject, Injectable, provide} from ‘angular2/core’; import {bootstrap} from ‘angular2/platform/browser’; import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf NgForm, Control, ControlGroup, FormBuilder, Validators} from ‘angular2/common’; import {RouteConfig, … Read more
Simplified version to add custom headers to your request: import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; @Injectable() export class ApiService { constructor(private _http: Http) {} call(url): Observable<any> { let username: string = ‘username’; let password: string = ‘password’; let headers: Headers = new Headers(); headers.append(“Authorization”, “Basic ” + btoa(username + “:” + password)); … Read more
Currently (from v. 4.3.0, when using new HttpClient from @ngular/common/http) Angular provides listening to progress out of the box. You just need to create HTTPRequest object as below: import { HttpRequest } from ‘@angular/common/http’; … const req = new HttpRequest(‘POST’, ‘/upload/file’, file, { reportProgress: true, }); And when you subscribe to to request you will … Read more
Broad question, TL;DR version @Injectable() is a decorator which tells the typescript that decorated class has dependencies and does not mean that this class can be injected in some other. And then TypeScript understands that it needs to Inject the required metadata into decorated class when constructing, by using the imported dependencies. bootstrap(app, [service]) bootstrap() … Read more
Working filters on each column, demo link Stackblitz. To filter specific column in mat-table, add a search field for the column as below; <mat-form-field class=”filter” floatLabel=”never”> <mat-label>Search</mat-label> <input matInput [formControl]=”nameFilter”> </mat-form-field> And we connect the inputs to FormControls from the ReactiveFormsModule. filterValues = { name: ”, id: ”, colour: ”, pet: ” }; And we … Read more
constructor(location:Location) { console.log(location.prepareExternalUrl(location.path())); } https://angular.io/api/common/Location#prepareexternalurl As the documentation says: Normalizes an external URL path. If the given URL doesn’t begin with a leading slash (“https://stackoverflow.com/”), adds one before normalizing. Adds a hash if HashLocationStrategy is in use, or the APP_BASE_HREF if the PathLocationStrategy is in use. It means that you have to explicitly specify APP_BASE_HREF … Read more
You have to inline the options. See github ticket #18586, entry by alxhub on August 9 2017. Typescript needs to be able to infer the observe and responseType values statically, in order to choose the correct return type for get(). If you pass in an improperly typed options object, it can’t infer the right return … Read more
For me the main difference is that the PathLocationStrategy requires a configuration on the server side to all the paths configured in @RouteConfig to be redirected to the main HTML page of your Angular2 application. Otherwise you will have some 404 errors when trying to reload your application in the browser or try to access … Read more