Build Angular2 HTML and TypeScript to a single file

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

Angular 2 Read More Directive

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

Cannot find module ‘angular2/angular2’

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

Angular 2 Basic Authentication not working

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

Angular 2 HTTP Progress bar

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

How to use Dependency Injection (DI) correctly in Angular2?

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

Filtering specific column in Angular Material table in angular 5 [duplicate]

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

How do I get the absolute path of the current page in Angular 2?

constructor(location:Location) { console.log(location.prepareExternalUrl(location.path())); } As the documentation says: Normalizes an external URL path. If the given URL doesn’t begin with a leading slash (“”), 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