angular6

I am trying out how to pass a message from app.component.ts to be displayed in messageComponent.ts on app.component.html I have added <app-messagecomponent></app-messagecomponent> Add the moment it's just showing nothing. I also have a method in a service: message.service.ts message(message) { return message; } So what I want to do to pass a message from other components via the message service so it's displaying in the app-messagecomponent.html For example from app.component.ts: sendMessageToService() { this.myservice.message('my Message to be displayed in the messageComponent'); } How can I

In angular 5.2.x for http get and post I had this code: post(url: string, model: any): Observable<boolean> { return this.http.post(url, model) .map(response => response) .do(data => console.log(url + ': ' + JSON.stringify(data))) .catch(err => this.handleError(err)); } get(url: string): Observable<any> { return this.http.get(url) .map(response => response) .do(data => console.log(url + ': ' + JSON.stringify(data)) ) .catch((error: any) => Observable.throw(this.handleError(error))); } In angular 6 it doesn't work. How can we make an HTTP post or get request? Update : In angular 7, they are the

In Angular Material Design 6, the (change) method was removed. I cant find how to replace the change method to execute code in the component when the user change selection Thanks! The changed it from change to selectionChange . <mat-select (change)="doSomething($event)"> is now <mat-select (selectionChange)="doSomething($event)"> https://material.angular.io/components/select/api If you're using Reactive forms you can listen for changes to the select control like so.. this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... }) silverhash For me (selectionChange) and

How to use angular 6 Route Auth Guards for all routes Root and Child Routes ? Kishore Kumar 1) [ Create guard, the file name would be like auth.guard.ts ] ng generate guard auth import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { AuthService } from './auth.service'; import {Router} from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AuthService, private myRoute: Router){ } canActivate( next:

Since I've created @Directive as SelectableDirective , I'm little bit confused, about how to pass more than one value to the custom directive. I have searched a lot but didn't get proper solution in Angular with Typescript . Here is what my sample code is: Parent Component as MCQComponent : import { Component, OnInit } from '@angular/core'; import { Question } from '../question/question'; import { AppService } from '../app.service/app.service'; import { SelectableDirective } from '../selectable.directive/selectable.directive'; import { ResultComponent } from '../result-component/result

Typescript code: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes(): Observable<Hero[]> { return of(HEROES); } } error info: error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'. src/app/hero.service.ts(2,10): error TS2305: Module '"F:/angular

We are hosting a new application with angular 6 and we have many servers with diff URLs, i want to change them automatically(like .property file in java). after searching in google i got some answers like changing paths in environment.ts file, so it will affect to all components. but its not exactly my requirements, means if i change URL in environment.ts file, we should save the file and we need to compile it once again. So exactly this is the problem i am facing, i don't want to save / compile the file. Please help me in this situation. service.ts file. emplLoginCheckUrl = this.baseUrl+"

I want to change the styles of ng bootstrap pagination component and using /deep/ links in an Angular 6 app. The following code works fine but the console is showing a warning that the code is deprecated. So, how should I change it to get rid of the warning? Here is the CSS code I am currently using: ngb-pagination /deep/ .page-item.disabled .page-link{ background: none; } ngb-pagination /deep/ .page-item.active .page-link { background-color: #223C61; &:focus, &:visited{ outline: none; box-shadow: none; } } An alternative to using /deep/ or ::ng-deep is to disable View Encapsulation on your