I have data streaming from backend and i see it printing in console now i am trying to push event to `dataSource` its throwing error dataSource is not defined. Can someone help how to dynamically add data to materialize table ?


stream.component.html

    &lt;mat-table #table [dataSource]=&quot;dataSource&quot;&gt;&lt;/mat-table&gt;

stream.component.ts

    import {
        Component,
        OnInit
    } from &#39;@angular/core&#39;;
    import {
        StreamService
    } from &#39;../stream.service&#39;;
    import {
        MatTableDataSource
    } from &#39;@angular/material&#39;;
    import * as io from &#39;socket.io-client&#39;;
    
    @Component({
        selector: &#39;app-stream&#39;,
        templateUrl: &#39;./stream.component.html&#39;,
        styleUrls: [&#39;./stream.component.css&#39;]
    })
    export class StreamComponent implements OnInit {
        displayedColumns = [&#39;ticketNum&#39;, &quot;assetID&quot;, &quot;severity&quot;, &quot;riskIndex&quot;, &quot;riskValue&quot;, &quot;ticketOpened&quot;, &quot;lastModifiedDate&quot;, &quot;eventType&quot;];
        dataSource: MatTableDataSource &lt; Element[] &gt; ;
        socket = io();
    
        constructor(private streamService: StreamService) {};
    
        ngOnInit() {
            this.streamService.getAllStream().subscribe(stream =&gt; {
                this.dataSource = new MatTableDataSource(stream);
            });
            this.socket.on(&#39;newMessage&#39;, function(event) {
                console.log(&#39;Datasource&#39;, event);
                this.dataSource.MatTableDataSource.filteredData.push(event);
            });
        }
    }
    
    
    export interface Element {
        ticketNum: number;
        ticketOpened: number;
        eventType: string;
        riskIndex: string;
        riskValue: number;
        severity: string;
        lastModifiedDate: number;
        assetID: string;
    }

How to add data dynamically to mat-table dataSource?

I have file upload control which holds the selected file as below,

    &lt;div class=&quot;Block&quot;&gt;
      &lt;label id=&quot;lbl&quot;&gt;File &lt;/label&gt;
      &lt;input #fileInput type=&#39;file&#39;/&gt;
    &lt;/div&gt;

I have a submit button as below,

    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; 
         (click)=&quot;uploadDocument()&quot;&gt;Upload File&lt;/button&gt;

When I select a file and click on the upload button the file I need the contents inside the file without sending it to the server and reading from there.

Note: Type of file will be `csv`

Read a file and parse its content

I keep getting the following errors when running unit tests

    Error: StaticInjectorError(DynamicTestModule)[ApiService -&gt; HttpClient]: 
    	  StaticInjectorError(Platform: core)[ApiService -&gt; HttpClient]: 
    	    NullInjectorError: No provider for HttpClient!





**api.service.ts**

    import { Injectable } from &#39;@angular/core&#39;;
    import { HttpClient } from &#39;@angular/common/http&#39;;
    
    @Injectable()
    export class ApiService {
    
      constructor(private http: HttpClient) { }
      url = &#39;./assets/data.json&#39;;
    
      get() {
        return this.http.get(this.url);
      }
    }


**api.service.spec.ts**

    import { TestBed, inject } from &#39;@angular/core/testing&#39;;
    import { HttpClientTestingModule, HttpTestingController } from &#39;@angular/common/http/testing&#39;;
    
    import { ApiService } from &#39;./api.service&#39;;
    
    describe(&#39;ApiService&#39;, () =&gt; {
      beforeEach(() =&gt; {
        TestBed.configureTestingModule({
          imports: [
            HttpClientTestingModule,
          ],
          providers: [
            ApiService,
          ],
        });
      });
    
      it(&#39;should get users&#39;, inject([HttpTestingController, ApiService],
          (httpMock: HttpTestingController, apiService: ApiService) =&gt; {
            expect(apiService).toBeTruthy();
          }
        )
      );
    });


I don&#39;t understand what is going wrong as I have included HttpClient into api.service.ts, the service works in the browser.

This is directly called in a component called MapComponent, and that is called inside HomeComponent.



    Chrome 63.0.3239 (Mac OS X 10.13.3) HomeComponent expect opened to be false FAILED
    	Error: StaticInjectorError(DynamicTestModule)[ApiService -&gt; HttpClient]: 
    	  StaticInjectorError(Platform: core)[ApiService -&gt; HttpClient]: 
    	    NullInjectorError: No provider for HttpClient!



Angular 5 service failing to pass unit tests with (NullInjectorError: No provider for HttpClient!)

In one of my unit test files, I have to mock several times the same service with different mocks.


    import { MyService } from &#39;../services/myservice.service&#39;;
    import { MockMyService1 } from &#39;../mocks/mockmyservice1&#39;;
    import { MockMyService2 } from &#39;../mocks/mockmyservice2&#39;;
    describe(&#39;MyComponent&#39;, () =&gt; {
    
        beforeEach(async(() =&gt; {
            TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            providers: [
                { provide: MyService, useClass: MockMyService1 }
            ]
            })
            .compileComponents();
        }));
    
        beforeEach(() =&gt; {
            fixture = TestBed.createComponent(MapComponent);
            mapComponent = fixture.componentInstance;
            fixture.detectChanges();
        });
    
        describe(&#39;MyFirstTest&#39;, () =&gt; {
            it(&#39;should test with my first mock&#39;, () =&gt; {
                /**
                 * Test with my first mock
                 */
            });
        });
    
        describe(&#39;MySecondTest&#39;, () =&gt; {
            // Here I would like to change { provide: MyService, useClass: MockMyService1 } to { provide: MyService, useClass: MockMyService2 }
    
            it(&#39;should test with my second mock&#39;, () =&gt; {
                /**
                 * Test with my second mock
                 */
            });
        });
    });



I see that the function [overrideProvider][1] exists, but I did not manage to use it in my test. When I use it in a &quot;it&quot;, the provider doesn&#39;t change. I didn&#39;t manage to find an example where this function is called. Could you explain me how to use it properly? Or have you an other method to do that?



  [1]: https://angular.io/api/core/testing/TestBed#overrideProvider

How override Provider in Angular 5 for only one test?

I am trying to update my Angular app from v5 to v6 following [this guide][1].

I have ran all these commands successfully:

    npm install -g @angular/cli
    npm install @angular/cli
    ng update @angular/cli
The problem is that I get an error when running this command:

    ng update @angular/core
                      Package &quot;@angular/flex-layout&quot; has an incompatible peer dependency to &quot;rxjs&quot; (requires &quot;^5.5.0&quot;, would install &quot;6.2.0&quot;).
                      Package &quot;@angular/compiler-cli&quot; has an incompatible peer dependency to &quot;typescript&quot; (requires &quot;&gt;=2.7.2 &lt;2.8&quot;, would install &quot;2.6.2&quot;)
    Incompatible peer dependencies found. See above.
I am not sure how to handle this &amp; I don&#39;t want to try things on my own to avoid breaking the app.

Can someone please advise what to do?

My current dependencies are as follows:

    {
     ....
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/cdk&quot;: &quot;^5.2.5&quot;,
        &quot;@angular/common&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/compiler&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/core&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/flex-layout&quot;: &quot;^5.0.0-beta.14&quot;,
        &quot;@angular/forms&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/http&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/material&quot;: &quot;^5.2.5&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/router&quot;: &quot;^5.2.10&quot;,
        &quot;@ngx-translate/core&quot;: &quot;^9.1.1&quot;,
        &quot;@ngx-translate/http-loader&quot;: &quot;^3.0.1&quot;,
        &quot;core-js&quot;: &quot;^2.5.5&quot;,
        &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
        &quot;primeng&quot;: &quot;^5.2.4&quot;,
        &quot;rxjs&quot;: &quot;^5.5.11&quot;,
        &quot;zone.js&quot;: &quot;^0.8.26&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;~0.6.3&quot;,
        &quot;@angular/cli&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^5.2.11&quot;,
        &quot;@angular/language-service&quot;: &quot;^5.2.10&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.3&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
        &quot;@types/node&quot;: &quot;^6.0.106&quot;,
        &quot;codelyzer&quot;: &quot;^4.3.0&quot;,
        &quot;jasmine-core&quot;: &quot;~2.8.0&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;karma&quot;: &quot;^2.0.2&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;^5.3.2&quot;,
        &quot;ts-node&quot;: &quot;~4.1.0&quot;,
        &quot;tslint&quot;: &quot;~5.9.1&quot;,
        &quot;typescript&quot;: &quot;~2.6.2&quot;
      }
    }


  [1]: https://update.angular.io/


When upgrading Angular 5 to 6, I get incompatible peer dependency (using ng update @angular/core)

My current url is http://localhost:4200/test/dashboard.

I want to print base url i.e http://localhost:4200 using angular 5 features.

How to get base url in angular 5?

I am trying to implement an icon that when clicked will save a variable to the user&#39;s clipboard. I have currently tried several libraries and none of them have been able to do so. 

How do I properly copy a variable to the user&#39;s clipboard in Angular 5?



Angular 5 - Copy to clipboard

When running the terminal commands `ng server` or `ng serve --live-reload=true`, I&#39;m getting this issue:

&gt; The serve command requires to be run in an Angular project, but a
&gt; project definition could not be found.

Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found

I&#39;m trying to do a custom validation on Angular 5 but I&#39;m facing the following error

    Expected validator to return Promise or Observable

I just want to return an error to the form if the value doesn&#39;t match the required, here&#39;s my code:

This is the component where my form is

      constructor(fb: FormBuilder, private cadastroService:CadastroService) {
        this.signUp = fb.group({
          &quot;name&quot;: [&quot;&quot;, Validators.compose([Validators.required, Validators.minLength(2)])],
          &quot;email&quot;: [&quot;&quot;, Validators.compose([Validators.required, Validators.email])],
          &quot;phone&quot;: [&quot;&quot;, Validators.compose([Validators.required, Validators.minLength(5)])],
          &quot;cpf&quot;: [&quot;&quot;, Validators.required, ValidateCpf]
        })     
       }

This code is in the file with the validation I want to implement:

    import { AbstractControl } from &#39;@angular/forms&#39;;
    
    export function ValidateCpf(control: AbstractControl){
        if (control.value == 13445) {
            return {errorCpf: true}
        }
        return null;
    }

Does that type of validation only work with observables or can I do it without being a promise or observable?

Expected validator to return Promise or Observable

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused.

I have tried a few ways found on StackOverflow with directive or so, but can&#39;t succeed.

Here is the sample code:

    @Component({
       selector: &#39;my-app&#39;,
       template: `
        &lt;div&gt;
        &lt;h2&gt;Hello&lt;/h2&gt;
        &lt;/div&gt;
        &lt;button (click) =&quot;showSearch()&quot;&gt;Show Search&lt;/button&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;form&gt;
          &lt;div &gt;
            &lt;input *ngIf=&quot;show&quot; #search type=&quot;text&quot;  /&gt;            
          &lt;/div&gt;
        &lt;/form&gt;
        `,
      })
      export class App implements AfterViewInit {
      @ViewChild(&#39;search&#39;) searchElement: ElementRef;
  
      show: false;
      name:string;
      constructor() {    
      }
  
      showSearch(){
        this.show = !this.show;    
        this.searchElement.nativeElement.focus();
        alert(&quot;focus&quot;);
      }
  
      ngAfterViewInit() {
        this.firstNameElement.nativeElement.focus();
      }

The search box is not set to focus.

How can I do that?

Set focus on &lt;input&gt; element

I am recently learning Angular 6 with @ngrx/store while one of the tutorial is to use @ngrx/store for state management, **however I don&#39;t understand the benefit of using @ngrx/store behind the scene.** 

For example, for a simple login and signup action, **previously by using the service(Let&#39;s call it AuthService)** we might use it to call the backend api, store &quot;userInfo&quot; or &quot;token&quot; in the AuthService, redirect user to &quot;HOME&quot; page and we can inject AuthService in any component where we need to get the userInfo by using DI, **which simply that one file AuthService handles everything**.

Now if we are using @ngrx/store, we need to define the **Action/State/Reducer/Effects/Selector** which probably need to write in 4 or 5 files to handle above action or event, then sometimes still we need to call backend api using service, **which seems much much more complicated and redundant...**

In some other scenario, *I even see some page uses @ngrx/store to store the object or list of object like grid data.*, **is that for some kind of in-memory store usage?**

So back to the question, **why are we using @ngrx/store over service registration store here in Angular project?**  I know it&#39;s for &quot;**STATE MANAGEMENT**&quot; usage, **but what exactly is the &quot;STATE MANAGEMENT&quot;? Is that something like transaction log and When do we need it? Why would we manage it on the front end?** Please feel free to share your suggestion or experience in the @ngrx/store area! 



Angular 6 - Why use @ngrx/store rather than service injection

I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers?

Here is service file code:

    import { HttpClient, HttpHeaders, HttpClientModule } from &#39;@angular/common/http&#39;;
    const httpOptions = {
      headers: new HttpHeaders({ 
        &#39;Access-Control-Allow-Origin&#39;:&#39;*&#39;,
        &#39;Authorization&#39;:&#39;authkey&#39;,
        &#39;userid&#39;:&#39;1&#39;
      })
    };

    public baseurl = &#39;http://localhost/XXXXXX&#39;;
    
    userAPI(data): Observable&lt;any&gt; {
      return this.http.post(this.baseurl, data, httpOptions)
        .pipe(
          tap((result) =&gt; console.log(&#39;result--&gt;&#39;,result)),
          catchError(this.handleError(&#39;error&#39;, []))
        );
    }

Error:

&gt; Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:4200&#39; is therefore not allowed access
&gt; 
&gt; failed: Http failure response for (unknown url): 0 Unknown Error

In my server-side code, I&#39;ve added CORS in the index file.

    header(&#39;Access-Control-Allow-Origin: *&#39;);
    header(&#39;Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS&#39;);
    header(&#39;Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token&#39;);

How to add CORS request in header in Angular 5

I&#39;m triggering a `HTTP` request and I&#39;m getting a valid response from it. The response also has a header `X-Token` that I wish to read. I&#39;m trying the below code to read the headers, however, I get null as a result

    this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
        body: reqParams.body,
        responseType: &#39;json&#39;,
        observe: &#39;response&#39;
    }).subscribe(
        (_response: any) =&gt; {
            // Also tried _response.headers.init();
            const header = _response.headers.get(&#39;X-Token&#39;);
            console.log(header);
            onComplete(_response.body);
         },
        _error =&gt; {
            onComplete({
                code: -1,
                message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
            });
        }
    );


The response of the `API`, when checked in Chrome inspect, shows the header is present.

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/HCwZ8.png

Read response headers from API response - Angular 5 + TypeScript

I can&#39;t inject MatDialogRef as it described in documentation: https://material.angular.io/components/dialog/overview

When i&#39;m trying to do it i&#39;v got error:

ERROR Error: StaticInjectorError[MatDialogRef]:
StaticInjectorError[MatDialogRef]:
NullInjectorError: No provider for MatDialogRef!

app.module.ts

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { NgModule }      from &#39;@angular/core&#39;;
    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { FormsModule }   from &#39;@angular/forms&#39;;

    import {
    	MatInputModule,
    	MatDialogModule,
    	MatProgressSpinnerModule,
    	MatButtonModule,
    	MatDialog,
    	MatDialogRef
    } from &#39;@angular/material&#39;;

    import { ApiModule } from &#39;../api/api.module&#39;;
    import { RoutingModule } from &#39;../routing/routing.module&#39;;

    import { RegistrationComponent } from &#39;./components/registration.component&#39;;
    import { LoginComponent } from &#39;./components/login.component&#39;;

    import { AccountService } from &#39;./services/account.service&#39;;

    @NgModule({
    	imports: [
    		BrowserModule,
    		MatInputModule,
    		MatDialogModule,
    		MatProgressSpinnerModule,
    		MatButtonModule,
    		FormsModule,
    		RoutingModule,
    		ApiModule
    	],
    	declarations: [
    		RegistrationComponent,
    		LoginComponent
    	],
    	entryComponents: [
    		LoginComponent,
    		RegistrationComponent
    	],
    	providers: [
    		AccountService,
    		MatDialog,
    		MatDialogRef
    	]
    })
    export class AccountModule {}

&lt;!-- end snippet --&gt;

home.component.ts

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Component } from &#39;@angular/core&#39;;

    import { MatDialog } from &#39;@angular/material&#39;;
    import { RegistrationComponent } from &#39;../account/components/registration.component&#39;;

    @Component({
        moduleId: module.id.replace(&#39;compiled&#39;, &#39;app&#39;),
        templateUrl: &#39;home.component.html&#39;
    })
    export class HomeComponent
    {
        constructor(private modalService: MatDialog) {}

        public openModal() : void
        {
            let dialog = this.modalService.open(RegistrationComponent, {});
        }
    }

&lt;!-- end snippet --&gt;

registration.component.ts

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Component } from &#39;@angular/core&#39;;
    import { Router } from &#39;@angular/router&#39;;
    import { MatDialogRef } from &#39;@angular/material/dialog&#39;;

    import { User } from &#39;../../../models/domain/User&#39;;
    import { ApiUserService } from &#39;../../api/entity-services/user.service&#39;;
    import { AuthService } from &#39;../../auth/auth.service&#39;;
    import { AccountService } from &#39;../services/account.service&#39;

    @Component({
    	selector: &#39;registration-component&#39;,
    	templateUrl: &#39;app/modules/account/templates/registration.component.html&#39;
    })
    export class RegistrationComponent
    {
    	public user :User = new User();

    	public errorMessage :string;

    	public isLoading :boolean;

    	constructor
    	(
    		private userService :ApiUserService,
    		private authService :AuthService,
    		private accountService :AccountService,
    		private router :Router,
    		public dialogRef :MatDialogRef&lt;RegistrationComponent&gt;
    	)
    	{
    		this.isLoading = false;
    	}

    	public onSubmit(e) :void
    	{
    		e.preventDefault();
    		this.isLoading = true;

    		this.userService
    			.Create(this.user)
    			.subscribe(
    				user =&gt;
    				{
    					this.user.id = user.id;
    					this.user.login = user.login;


    					this.authService
    						.Login(this.user)
    						.subscribe(
    							token =&gt;
    							{
    								this.accountService.Load()
    									.subscribe(
    										account =&gt;
    										{
    											this.user = account;
    											this.isLoading = false;
    											this.dialogRef.close();

    											let redirectRoute = account.activeScopeId
    												? `/scope/${account.activeScopeId}`
    												: &#39;/scope-list/&#39;;

    											this.router.navigate([redirectRoute]);
    										},
    										error =&gt; this.errorMessage = &lt;any&gt;error
    									);
    							},
    							error =&gt; this.errorMessage = &lt;any&gt;error
    						);
    				},
    				error =&gt; this.errorMessage = &lt;any&gt;error
    			);
    	}
    }

&lt;!-- end snippet --&gt;



NullInjectorError: No provider for MatDialogRef

I am using the `Angular-CLI 1.6.6` and `@angular/service-worker 5.2.5` in our `Angular 5.2.5` app. Everything works fine on the local lite-server, as well as on the production server, except for one error message popping in our production environment: 

&gt; Failed to load resource: the server responded with a status of 504
&gt; (Gateway Timeout)

Looking into the `ngsw-worker.js` script I found the lines (2466 following) where the error message above is generated:

```typescript
    async safeFetch(req) {
        try {
            return await this.scope.fetch(req);
        }
        catch (err) {
            this.debugger.log(err, `Driver.fetch(${req.url})`);
            return this.adapter.newResponse(null, {
                status: 504,
                statusText: &#39;Gateway Timeout&#39;,
            });
        }
    } 
```
Console logging err in the catch puts out the following error:
```bash
    TypeError: Failed to execute &#39;fetch&#39; on &#39;ServiceWorkerGlobalScope&#39;: &#39;only-if-cached&#39; can be set only with &#39;same-origin&#39; mode
        at Driver.safeFetch (ngsw-worker.js:2464)
        at Driver.handleFetch (ngsw-worker.js:1954)
        at &lt;anonymous&gt;
```
An error that seems related to this question: https://stackoverflow.com/questions/48463483/what-causes-a-failed-to-execute-fetch-on-serviceworkerglobalscope-only-if

The req that generates this error is any first access to the app:

    https://example.com/test/#/connect
    https://example.com/test/#/map?token=[accestoken]
    ...

On app reload the error is not repeated.

Can anybody help me out here? Is there a bug in `safeFetch()` of the service worker (maybe to support HashLocationStrategy)? Do I have to change anything in my config?

Angular Service Worker - Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

I am using Angular with Material

     &lt;button mat-icon-button&gt;&lt;mat-icon svgIcon=&quot;thumb-up&quot;&gt;&lt;/mat-icon&gt;Start Recording&lt;/button&gt;

I am trying to add an icon to button, but I can&#39;t figure out how to do it, and can&#39;t find documentation for this.

https://material.angular.io/components/button/api

looking the docs, there is this:

[![enter image description here][1]][1]

that button has the following html:

    &lt;a _ngcontent-c1=&quot;&quot; aria-label=&quot;Angular Material&quot; class=&quot;docs-button mat-button&quot; mat-button=&quot;&quot; routerlink=&quot;/&quot; tabindex=&quot;0&quot; aria-disabled=&quot;false&quot; href=&quot;/&quot;&gt;&lt;span class=&quot;mat-button-wrapper&quot;&gt;
        &lt;img _ngcontent-c1=&quot;&quot; alt=&quot;angular&quot; class=&quot;docs-angular-logo&quot; src=&quot;../../../assets/img/homepage/angular-white-transparent.svg&quot;&gt;
        &lt;span _ngcontent-c1=&quot;&quot;&gt;Material&lt;/span&gt;
      &lt;/span&gt; &lt;div class=&quot;mat-button-ripple mat-ripple&quot; matripple=&quot;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;mat-button-focus-overlay&quot;&gt;
    &lt;/div&gt;
    &lt;/a&gt;

is that the right way to do it?

  [1]: https://i.stack.imgur.com/Zl2KI.png

How to add icon to mat-icon-button

I have a little web app with Angular 5 and out of a sudden I am getting this strange error message in my browser console:

    ncaught Error: Template parse errors:
    No provider for ControlContainer (&quot;
    &lt;/p&gt;
    &lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
      [ERROR -&gt;]&lt;app-form-group-component 
    [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
          &lt;button &quot;): ng:///AppModule/KickoffComponent.html@4:2

That did not happen before and I am not aware of any made changes. And I have no idea what that message tries to tell me.

This is the component template of form-group which seems to be invalid somehow:

    &lt;div *ngFor=&#39;let e of formGroup&#39; class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;{{e.key}}&quot;&gt;{{e.label}}&lt;/label&gt;
    &lt;input type=&quot;{{e.type}}&quot; name=&quot;{{e.key}}&quot; 
    [(ngModel)]=&quot;e.value&quot; class=&quot;form-control&quot; 
    [ngClass]=&#39;{&quot;is-valid&quot;: e.valid === true &amp;&amp; e.required === true}&#39;
            /&gt;
        &lt;/div&gt;

And this is the template where I consume form-group:

    &lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
     &lt;app-form-group-component [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
    &lt;app-notification [notification]=&quot;notification&quot;&gt;&lt;/app-notification&gt;

I stared at it for hours, but I can&#39;t find any mistake.

I should mention that I don&#39;t use Angular&#39;s FormGroup but my own solution (because I thought theirs to be overengineered and it didn&#39;t fit my specific needs). Could there be some kind of name collision? Of course, in the app.module I have imported the FormsModule for two-way binding to work and to intercept the form&#39;s submit.
The notification-component at least works without complaints.

I would be very grateful for any help.

**Edit:**
I was asked to share my TS code.

Failing component:  

    import { Component, Input } from &#39;@angular/core&#39;;
    import { FormGroup } from &#39;../../models/form-group&#39;;
    
    @Component({
      selector: &#39;app-form-group-component&#39;,
      templateUrl: &#39;./form-group.component.html&#39;,
    })
    export class FormGroupComponent {
      @Input() formGroup?: FormGroup
    }
The type _FormGroup_ is just an Array and the component is just meant to be a visual wrapper.
There are no additional services involved or DI and without that component Angular compiles just fine.
(_formGroup_ is marked as optional because TS would keep complaining about it not being initialized, although at runtime it will always be initialized)

Component which hands over property:

    import { Component, OnInit } from &quot;@angular/core&quot;;
    import { additionalInformation } from &quot;./additional-information&quot;;
    import { basicInformation } from &quot;./basic-information&quot;;
    ...
    
    @Component({
      selector: &quot;app-kickoff&quot;,
      templateUrl: &quot;./kickoff.component.html&quot;,
    })
    export class KickoffComponent implements OnInit {
      basicInformation: FormGroup = basicInformation;
      additionalInformation: FormGroup = additionalInformation;
      methods...
    }

**Edit:** To answer @Andrei&#39;s question: I have no service or provider called ControlContainer. I just have three small services, none of them causes any trouble. As far as I can tell, ControlContainer has something to do with DI, but Angular&#39;s documentation on that topic is rather mystifying. 

Angular 5: &quot;No provider for ControlContainer&quot;

After migrating application from angular 5 to 6, on running ng serve the following errors pop up.

&gt; Schema validation failed with the following errors:
  Data path &quot;&quot; should NOT have additional properties(project).
Error: Schema validation failed with the following errors:
  Data path &quot;&quot; should NOT have additional properties(project).
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/src/workspace/workspace.js:210:42)
    at MergeMapSubscriber._tryNext (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
    at MergeMapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
    at MergeMapSubscriber.Subscriber.next (/home/training/Attinad_Projects/TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at MergeMapSubscriber.notifyNext (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:84:26)
    at InnerSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
    at InnerSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at MapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/map.js:52:26)
    at MapSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at SwitchMapSubscriber.notifyNext (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:77:26)

 

I assume that the error is with .angular.json file which I re-named from .angular-cli.json . 

My .angular.json file is as follows : 



    {
        &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
        &quot;project&quot;: {
            &quot;name&quot;: &quot;mediaweb&quot;
        },
        &quot;apps&quot;: [{
                &quot;root&quot;: &quot;src&quot;,
                &quot;outDir&quot;: &quot;dist/browser&quot;,
                &quot;assets&quot;: [
                    &quot;assets&quot;,
                    &quot;favicon.ico&quot;
                ],
                &quot;index&quot;: &quot;index.html&quot;,
                &quot;main&quot;: &quot;main.ts&quot;,
                &quot;polyfills&quot;: &quot;polyfills.ts&quot;,
                &quot;test&quot;: &quot;test.ts&quot;,
                &quot;tsconfig&quot;: &quot;tsconfig.app.json&quot;,
                &quot;testTsconfig&quot;: &quot;tsconfig.spec.json&quot;,
                &quot;prefix&quot;: &quot;app&quot;,
                &quot;styles&quot;: [
                    &quot;styles.scss&quot;,
                    &quot;../node_modules/owl.carousel/dist/assets/owl.carousel.css&quot;,
                    &quot;../node_modules/owl.carousel/dist/assets/owl.theme.default.css&quot;,
                    &quot;../node_modules/video.js/dist/video-js.css&quot;
                ],
                &quot;scripts&quot;: [
                    &quot;../node_modules/jquery/dist/jquery.js&quot;,
                    &quot;../node_modules/owl.carousel/dist/owl.carousel.js&quot;,
                    &quot;../node_modules/video.js/dist/ie8/videojs-ie8.js&quot;,
                    &quot;../node_modules/video.js/dist/video.js&quot;
                ],
                &quot;environmentSource&quot;: &quot;environments/environment.ts&quot;,
                &quot;environments&quot;: {
                    &quot;dev&quot;: &quot;environments/environment.dev.ts&quot;,
                    &quot;prod&quot;: &quot;environments/environment.prod.ts&quot;
                }
            },
            {
                &quot;platform&quot;: &quot;server&quot;,
                &quot;root&quot;: &quot;src&quot;,
                &quot;outDir&quot;: &quot;dist/server&quot;,
                &quot;assets&quot;: [
                    &quot;assets&quot;,
                    &quot;favicon.ico&quot;
                ],
                &quot;index&quot;: &quot;index.html&quot;,
                &quot;main&quot;: &quot;main.server.ts&quot;,
                &quot;test&quot;: &quot;test.ts&quot;,
                &quot;tsconfig&quot;: &quot;tsconfig.server.json&quot;,
                &quot;testTsconfig&quot;: &quot;tsconfig.spec.json&quot;,
                &quot;prefix&quot;: &quot;app&quot;,
                &quot;styles&quot;: [
                    &quot;styles.scss&quot;
                ],
                &quot;scripts&quot;: [],
                &quot;environmentSource&quot;: &quot;environments/environment.ts&quot;,
                &quot;environments&quot;: {
                    &quot;dev&quot;: &quot;environments/environment.dev.ts&quot;,
                    &quot;prod&quot;: &quot;environments/environment.prod.ts&quot;
                }
            }
        ],
        &quot;e2e&quot;: {
            &quot;protractor&quot;: {
                &quot;config&quot;: &quot;./protractor.conf.js&quot;
            }
        },
        &quot;lint&quot;: [{
                &quot;project&quot;: &quot;src/tsconfig.app.json&quot;,
                &quot;exclude&quot;: [&quot;**/node_modules/**&quot;, &quot;**/UI/**&quot;]
            },
            {
                &quot;project&quot;: &quot;src/tsconfig.spec.json&quot;,
                &quot;exclude&quot;: &quot;**/node_modules/**&quot;
            },
            {
                &quot;project&quot;: &quot;e2e/tsconfig.e2e.json&quot;,
                &quot;exclude&quot;: &quot;**/node_modules/**&quot;
            }
        ],
        &quot;test&quot;: {
            &quot;karma&quot;: {
                &quot;config&quot;: &quot;./karma.conf.js&quot;
            }
        },
        &quot;defaults&quot;: {
            &quot;styleExt&quot;: &quot;scss&quot;,
            &quot;component&quot;: {}
        }
    }

Should I re-structure the json file, if so how?.

Any help would be great.




Error: Schema validation failed with the following errors: Data path &quot;&quot; should NOT have additional properties(project)

Is there any npm module/ other way like [React-Helmet][1] that allows us to change page title as we route through our Angular application?
 
PS: I am using Angular 5.


  [1]: https://github.com/nfl/react-helmet

How to change page title with routing in Angular application?

I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the &#39;Submit&#39; button.

I know it&#39;s normally as easy as adding `type=submit` to my button element but it does not seem to be working at all.

I don&#39;t really want to call an `onclick` function just to get it working. Can anyone suggest anything that I may be missing.

&lt;!-- language: lang-html --&gt;

    &lt;form (submit)=&quot;search(ref, id, forename, surname, postcode)&quot; action=&quot;#&quot;&gt;
      &lt;mat-card&gt;
        &lt;mat-card-title class=&quot;firstCard&quot;&gt;Investor/Adviser search&lt;/mat-card-title&gt;
        &lt;mat-card-content&gt;
          &lt;p *ngIf=&quot;this.noCriteria&quot; class=&quot;errorMessage&quot;&gt;Please enter search criteria.&lt;/p&gt;
          &lt;p *ngIf=&quot;this.notFound&quot; class=&quot;errorMessage&quot;&gt;No investor&#39;s or adviser&#39;s found.&lt;/p&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invReference&quot; placeholder=&quot;Investor/Adviser reference (e.g. SCC/AJBS)&quot; #ref&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invId&quot; placeholder=&quot;Investor/Adviser ID&quot; type=&quot;number&quot; #id&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invForname&quot; placeholder=&quot;Forename&quot; #forename&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invSurname&quot; placeholder=&quot;Surname&quot; #surname&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput id=&quot;invPostcode&quot; placeholder=&quot;Postcode&quot; #postcode&gt;
            &lt;/mat-form-field&gt;
        &lt;/mat-card-content&gt;
        &lt;mat-card-footer&gt;
          &lt;button mat-raised-button type=&quot;submit&quot; class=&quot;successButton&quot; id=&quot;invSearch&quot; title=&quot;Click to perform search.&quot;&gt;Search&lt;/button&gt;
        &lt;/mat-card-footer&gt;
      &lt;/mat-card&gt;
    &lt;/form&gt;

Angular 5 Button Submit On Enter Key Press

I&#39;m using Angular 5.

I want to know how can I start timing when a &#39;play&#39; button is pressed, in order to know how much time has passed since I clicked.

I&#39;d also like to know if it&#39;s possible to stop the timer and then be able to continue with the same time before.

I&#39;ve finally solved my question with Pardeep Jain answer. Athough it wasn&#39;t exactly what I was looking for.
I didn&#39;t want a countdown, I wanted to count the duration. Here is the code I&#39;ve used at the end:

    time: number = 0;
    interval;

    startTimer() {
      this.play = true;
      this.interval = setInterval(() =&gt; {
        this.time++;
      },1000)
    }

    pauseTimer() {
      this.play = false;
      clearInterval(this.interval);
    }



How to do a timer in Angular 5

I have 2 radio buttons, I&#39;m using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can only select 1 radio button -- can never unselect and select the other one. Only allows me to select the same one.

    this.genderControl = new FormControl(&quot;&quot;, Validators.required);
and then added to my Form Group

    genderControl: this.genderControl,

My HTML:

    &lt;div class=&quot;radio-inline&quot;&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt; Male&lt;/label&gt;
      &lt;input id=&quot;gender&quot; type=&quot;radio&quot; name=&quot;genderControl&quot; formControlName=&quot;genderControl&quot; /&gt;
      &lt;label class=&quot;radio-label&quot;&gt;Female&lt;/label&gt;
    &lt;/div&gt;


Form Group

        this.personalInfo = new FormGroup({
      searchControl: this.searchControl,
      titleControl: this.titleControl,
      firstNameControl: this.firstNameControl,
      middleNameControl: this.middleNameControl,
      lastNameControl: this.lastNameControl,
      birthdayControl: this.birthdayControl,
      genderControl: this.genderControl,
      phoneControl: this.phoneControl,
      taxCanadaControl: this.taxCanadaControl,
      provinceControl: this.provinceControl,
      countryControl: this.countryControl,
      taxCountryControl: this.taxCountryControl,

      creditControl: this.creditControl
    });



Angular 5 Reactive Forms - Radio Button Group

Currently I&#39;m working on a project which is being hosted on a clients server. For new &#39;modules&#39; there is **no intention to recompile** the entire application. That said, the client wants to **update the router/lazy loaded modules in runtime**. I&#39;ve tried several things out but I can&#39;t get it to work. I was wondering if any of you knows what I could still try or what I missed.

One thing I noticed, most of the resources I tried, using angular cli, are being bundled into seperate chunks by webpack by default when building the application. Which seems logical as it makes use of the webpack code splitting. but what if the module is not known yet at compile time (but a compiled module is stored somewhere on a server)? The bundling does not work because it can&#39;t find the module to import. And Using SystemJS will load up UMD modules whenever found on the system, but are also bundled in a seperate chunk by webpack.

Some resources I already tried;

 - [dynamic-remote-component-loader][1]
 - [module-loading][2]
 - [https://stackoverflow.com/questions/42953858/loading-modules-from-different-server-at-runtime][3]
 - [https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application][4]
 - [https://stackoverflow.com/questions/41438198/implementing-a-plugin-architecture-plugin-system-pluggable-framework-in-angu][5]
 - [https://stackoverflow.com/questions/48590455/angular-5-load-modules-that-are-not-known-at-compile-time-dynamically-at-run][6]
 - [https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e][7]
 - Some several other relating this topic.


Some code I already tried and implement, but not working at this time;

Extending router with normal module.ts file

      this.router.config.push({
        path: &quot;external&quot;,
        loadChildren: () =&gt;
          System.import(&quot;./module/external.module&quot;).then(
            module =&gt; module[&quot;ExternalModule&quot;],
            () =&gt; {
              throw { loadChunkError: true };
            }
          )
      });

Normal SystemJS Import of UMD bundle

    System.import(&quot;./external/bundles/external.umd.js&quot;).then(modules =&gt; {
      console.log(modules);
      this.compiler.compileModuleAndAllComponentsAsync(modules[&#39;External&#39;])
        .then(compiled =&gt; {
          const m = compiled.ngModuleFactory.create(this.injector);
          const factory = compiled.componentFactories[0];
          const cmp = factory.create(this.injector, [], null, m);
        });
    });

Import external module, not working with webpack (afaik)

    const url = &#39;https://gist.githubusercontent.com/dianadujing/a7bbbf191349182e1d459286dba0282f/raw/c23281f8c5fabb10ab9d144489316919e4233d11/app.module.ts&#39;;
    const importer = (url:any) =&gt; Observable.fromPromise(System.import(url));
    console.log(&#39;importer:&#39;, importer);
    importer(url)
      .subscribe((modules) =&gt; {
        console.log(&#39;modules:&#39;, modules, modules[&#39;AppModule&#39;]);
        this.cfr = this.compiler
          .compileModuleAndAllComponentsSync(modules[&#39;AppModule&#39;]);
        console.log(this.cfr,&#39;,&#39;, this.cfr.componentFactories[0]);
        this.external.createComponent(this.cfr.componentFactories[0], 0);
    });

Use SystemJsNgModuleLoader

    this.loader.load(&#39;app/lazy/lazy.module#LazyModule&#39;)
      .then((moduleFactory: NgModuleFactory&lt;any&gt;) =&gt; {
        console.log(moduleFactory);
        const entryComponent = (&lt;any&gt;moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);

        const compFactory = moduleRef.componentFactoryResolver
          .resolveComponentFactory(entryComponent);
      });

Tried loading a module made with rollup

    this.http.get(`./myplugin/${metadataFileName}`)
      .map(res =&gt; res.json())
      .map((metadata: PluginMetadata) =&gt; {

        // create the element to load in the module and factories
        const script = document.createElement(&#39;script&#39;);
        script.src = `./myplugin/${factoryFileName}`;

        script.onload = () =&gt; {
          //rollup builds the bundle so it&#39;s attached to the window 
          //object when loaded in
          const moduleFactory: NgModuleFactory&lt;any&gt; = 
            window[metadata.name][metadata.moduleName + factorySuffix];
          const moduleRef = moduleFactory.create(this.injector);

          //use the entry point token to grab the component type that 
          //we should be rendering
          const compType = moduleRef.injector.get(pluginEntryPointToken);
          const compFactory = moduleRef.componentFactoryResolver
            .resolveComponentFactory(compType); 
    // Works perfectly in debug, but when building for production it
    // returns an error &#39;cannot find name Component of undefined&#39; 
    // Not getting it to work with the router module.
        }

        document.head.appendChild(script);

      }).subscribe();

Example with SystemJsNgModuleLoader only works when the Module is already provided as &#39;lazy&#39; route in the RouterModule of the app (which turns it into a chunk when built with webpack)

I found a lot of discussion about this topic on StackOverflow here and there and provided solutions seem really good of loading modules/components dynamically if known up front. but none is fitting for our use case of the project. Please let me know what I can still try or dive into.

Thanks!

EDIT: I&#39;ve found; https://github.com/kirjs/angular-dynamic-module-loading and will give this a try.

UPDATE: I&#39;ve created a repository with an example of loading modules dynamically using SystemJS (and using Angular 6); https://github.com/lmeijdam/angular-umd-dynamic-example



  [1]: https://github.com/dianadujing/dynamic-remote-component-loader
  [2]: https://github.com/Toxicable/module-loading
  [3]: https://stackoverflow.com/questions/42953858/loading-modules-from-different-server-at-runtime
  [4]: https://stackoverflow.com/questions/45503497/how-to-load-dynamic-external-components-into-angular-application
  [5]: https://stackoverflow.com/questions/41438198/implementing-a-plugin-architecture-plugin-system-pluggable-framework-in-angu
  [6]: https://stackoverflow.com/questions/48590455/angular-5-load-modules-that-are-not-known-at-compile-time-dynamically-at-run
  [7]: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

Load new modules dynamically in run-time with Angular CLI &amp; Angular 5

How can I set default selected last button in toggle group.&lt;br&gt;
This is my code.

    &lt;mat-button-toggle-group #group=&quot;matButtonToggleGroup&quot;&gt;
        &lt;mat-button-toggle value=&quot;Heritage&quot;&gt;
            &lt;span&gt;Heritage&lt;/span&gt;
        &lt;/mat-button-toggle&gt;
        &lt;mat-button-toggle value=&quot;Nature&quot;&gt;
            &lt;span&gt;Nature&lt;/span&gt;
        &lt;/mat-button-toggle&gt;
        &lt;mat-button-toggle value=&quot;People&quot;&gt;
            &lt;span&gt;People&lt;/span&gt;
        &lt;/mat-button-toggle&gt;
        &lt;mat-button-toggle value=&quot;All&quot;&gt;
            &lt;span&gt;All&lt;/span&gt;
        &lt;/mat-button-toggle&gt;
    &lt;/mat-button-toggle-group&gt;

All Angular5 Solutions on Gang of Coders

Total of 24 Angular5 Solutions