There is not much difference. `EventEmitter` extends `Subject`.

The Angular2 team stressed the fact though, that `EventEmitter` should not be used for anything else then `@Output()`s in components and directives.

The Angular team [has stated][1] that they may change the underlying implementation of `EventEmitter` and break user code that uses `EventEmitter` for something it wasn&#39;t intended for. That&#39;s the main difference.


  [1]: https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949

Also `EventEmitter` gets cleaned up automatically unlike custom `Subjects` that you need to unsubscribe to in the `onDestroy` lifecycle hook.

EventEmitter by default is synchronous, whereas Subject is not. 
You can pass a flag to EventEmitter to make it asynchronous.

`EventEmitter` and `Subjects` serve the same purpose - to notify about an event to an observer.

But `EventEmitter` should only be used to notify an event from the child to the parent i.e., it should only be used with `@Output()`. 

To notify about an event across different components, `Subjects` should be preferred. Subjects emit the value from one component and any other component can subscribe to it and it&#39;ll get notified.

I upgraded Xcode to 8.1 GM and am now getting the below error for SwiftyJSON. Other imported frameworks seem to work. Is there a way to force this to work in Swift 3 until SwiftyJSON upgrades their framework? I used Carthage to import/update frameworks. I also tried changing `Use Legacy Swift language version` On and Off to no avail.

&gt; Module compiled with Swift 3.0 cannot be imported in Swift 3.0.1:
&gt; Modules/SwiftyJSON.swiftmodule/arm64.swiftmodule

Module compiled with swift 3.0 cannot be imported in Swift 3.0.1

I am developing websites and creating applications. I want to know how to inspect an element through web browsers like safari. 

In normal Chrome, Firefox, Explorer or any other browsers, we will right click the mouse button or press Function Key `F12` to view the `Inspect Element`. But it is not happening in the case of safari browser.

Share your thoughts! 

How to Inspect Element using Safari Browser

In Angular 2 what is the difference between Event Emitter and Subject for announcing an event? It seems like event emitters are less complicated to declare....Which way is preferred by Angular 2?

    dataRefreshEvent = new EventEmitter();
    
    private companyDataAnnouncedSource = new Subject();
    companyDataAnnouncedSource$ = this.companyDataAnnouncedSource.asObservable();

Angular 2 Event emitters vs Subject

In Angular 2 what is the difference between Event Emitter and Subject for announcing an event? It seems like event emitters are less complicated to declare....Which way is preferred by Angular 2?
<pre><code class="hljs language-ini">dataRefreshEvent = new EventEmitter();

private companyDataAnnouncedSource = new Subject();
companyDataAnnouncedSource$ = this.companyDataAnnouncedSource.asObservable();
</code></pre>

&lt;!-- language-all: lang-ts --&gt;

I&#39;m still new to this and learning via tutorials, but for some reason i&#39;m getting the message `No provider for formbuilder` when trying to test unique username.
I&#39;m not sure why i&#39;m getting this message, but i&#39;m unable to find a solution. Can anyone tell me why this is happening?


signup-component.ts

    import {Component} from &#39;@angular/core&#39;;
    import {ControlGroup, Control, Validators, FormBuilder} from &#39;@angular/common&#39;
    import {UsernameValidators} from &#39;./usernameValidators&#39;
    
    @Component({
    selector: &#39;signup&#39;,
    templateUrl: &#39;signup-component.html&#39;
    
    })
    export class SignupComponent{
      form: ControlGroup;

      constructor(fb: FormBuilder){
        this.form = fb.group({
          username:[&#39;&#39;, Validators.compose([
              Validators.required, UsernameValidators.cannotContainSpace
          ])],
          password: [&#39;&#39;, Validators.required]
        })
      }
    }


usernameValidators.ts

    import {Control} from &#39;@angular/common&#39;
    
    
    export class UsernameValidators{
    
      static shouldBeUnique(control: Control){
        return new Promise((resolve, reject) =&gt; {
          setTimeout(function(){
            if(control.value == &quot;andy&quot;)
              resolve({shouldBeUnique: true});
            else
              resolve(null);
          }, 1000);
    
        });
    
      }
    
    
      static cannotContainSpace(control: Control){
        if (control.value.indexOf(&#39; &#39;) &gt;= 0)
          return {cannotContainSpace: true};
    
        return null;
      }
    }



No Provider for FormBuilder

I have a MasterComponent which loads header, footer, sidebar etc. On the header there is a dropdown whose options are set once the user is logged in. I want the header to be constant even if I navigate to different routes which loads different child component. Means that the selected option should not change and value of dropdown should be accessible in all the child component. Onchange of dropdown value the current child component should be updated/reloaded.

How should I approach this problem? I want to event-listener kind of functionality. Once the model from MasterComponent Changes , reload the current child component.  On MasterComponent&#39;s variable variable update ChildComponent will listen to the update and run some function or call some API again and reload the ChildComponent.

&lt;!-- language: lang-ts --&gt;

    // routes
    const appRoutes: Routes = [
        {
            path: &#39;&#39;,
            redirectTo: &#39;login&#39;,
            pathMatch: &#39;full&#39;,
        },
        {   path: &#39;login&#39;, component: LoginComponent },
        {   path: &#39;logout&#39;, component: LogoutComponent },
        {
            path: &#39;&#39;,
            component: MasterComponent,
            canActivate: [AuthGuard],
            children: [
                { path: &#39;record/create&#39;, component: RecordCreateComponent }, // create record for selectedRestaurant in MasterComponent
                { path: &#39;record/&#39;, component: RecordComponent }, // shows all record of current selectedRestaurant in MasterComponent
                { path: &#39;record/:id/update&#39;, component:RecordUpdateComponent }, // show form to edit record having id
                { path: &#39;record/:id&#39;, component: RecordComponent }, // show record details having id
            ]
        },
        { path: &#39;**&#39;, redirectTo: &#39;login&#39; }
    ];

&lt;!-- language: lang-ts --&gt;

    // MasterComponent
    @Component({
        selector: &#39;master&#39;,
        templateUrl: templateUrl,
        styleUrls:[styleUrl1]
    
    })
    export class MasterComponent implements AfterViewInit, OnInit{
        restaurants: Array&lt;Restaurant&gt; = [];
        user:User;
        selectedRestaurant: Restaurant;
    
        constructor(private router: Router, private storageHelper:StorageHelper){
        }
        ngAfterViewInit() {
        }
        ngOnInit(){
            this.user = JSON.parse(this.storageHelper.getItem(&#39;user&#39;));
            this.restaurants = this.user.restaurants;
            this.selectedRestaurant = this.restaurants[0];
            this.router.navigate([&#39;/record/&#39; + this.selectedRestaurant.id]);
        }
        onRestaurantChange(){
            this.router.navigate([&#39;/record/&#39; + this.selectedRestaurant.id]);
        }
        createRecord(){
        }
    }

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/63KUJ.png

Reload child component when variables on parent component changes. Angular2

Is it possible to add a global CSS file to Angular 2?
At the moment I have many different components that have the same button styling - but each of the components have their own CSS file with the styling.  This is frustrating for changes.

I read somewhere on Stack Overflow to add:

    import { ViewEncapsulation } from &#39;@angular/core&#39;; //add this

    @Component({
      selector: &#39;app-root&#39;,
      templateUrl: &#39;./app.component.html&#39;,
      styleUrls: [&#39;./app.component.css&#39;],
      encapsulation: ViewEncapsulation.None            //add this
    })

So I added the ViewEncapsulation lines in the root component, then added the CSS styling to the root app CSS (app.component.css) and removed the CSS styling from individual component CSS files, and it did not work.

Surely there is a way to add a global CSS file?  Do I need to add something to the individual components to make them access the global CSS file?

Angular 2 - Global CSS file

**Route**

    const appRoutes: Routes = [
    	{ path: &#39;&#39;, redirectTo: &#39;/companies/unionbank&#39;, pathMatch: &#39;full&#39;},
    	{ path: &#39;companies/:bank&#39;, component: BanksComponent },
        { path: &#39;**&#39;, redirectTo: &#39;/companies/unionbank&#39; }
    ]

**Component**

    const NAVBAR = [
    	{ 
    		name: &#39;Banks&#39;,
    		submenu: [
    			{ routelink: &#39;/companies/unionbank&#39;, name: &#39;Union Bank&#39; },
    			{ routelink: &#39;/companies/metrobank&#39;, name: &#39;Metro Bank&#39; },
    			{ routelink: &#39;/companies/bdo&#39;, name: &#39;BDO&#39; },
    			{ routelink: &#39;/companies/chinabank&#39;, name: &#39;China Bank&#39; },
    		]
    	},
        ...
    ]

Example of link: `http://localhost:8099/#/companies/bdo`

I want to get `String` **bdo**  in the example link above.

I&#39;m aware that I can get the link by using window.location.href and split into array. So, I can get the last param but I want to know if there&#39;s a proper method on doing this in angular way. 

Any help would be appreciated. Thanks

How to get parameter on Angular2 route in Angular way?

I&#39;ve tried loading modules without router using [`SystemJsNgModuleLoader`](https://angular.io/docs/ts/latest/api/core/index/SystemJsNgModuleLoader-class.html), but couldn&#39;t get it to work:

    this.loader.load(url).then(console.info);

I&#39;m getting `Cannot find module xxx` for whatever string I use for URL (aboslute/relative urls/paths... tried many options). I looked through Router source code and couldn&#39;t find anything other then this `SystemJsNgModuleLoader`. I&#39;m not even sure I should be using this...

---
This question was asked just yesterday at `ng-europe 2016` conference - Miško &amp; Matias answered:

&gt;**Miško Hevery:**
One just has to *get hold of the module*, from there you can get the hold of component factory and you can dynamically load component factory anywhere you want in the application. This is exactly what the router does internally. So it&#39;s quite strait forward for you to do that as well.

&gt;**Matias Niemel&#228;**
The only special thing to note is that on the [Ng]Module there&#39;s something called `entryComponents` and that identifies components that could be lazy loaded - that&#39;s the entry into that component set. So when you have modules that are lazy loaded, please put *the stuff* into `entryComponents`.

...but it&#39;s not that strait forward without examples and poor docs on the subject (; 

Anyone knows how to load modules manually, without using `Route.loadChildren`? How to *get hold of the module* and what exactly is *the stuff* that should go into `entryComponents` (I read [FAQ](https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-entry-component-defined), but can&#39;t try without actually loading module)?

Content Type	Original Author	Original Content on Stackoverflow
Question	Ka Tech	View Question on Stackoverflow
Solution 1 - Angular	Günter Zöchbauer	View Answer on Stackoverflow
Solution 2 - Angular	Pro7ect	View Answer on Stackoverflow
Solution 3 - Angular	justMe	View Answer on Stackoverflow
Solution 4 - Angular	Nikhil Yadav	View Answer on Stackoverflow

Angular 2 Event emitters vs Subject

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

Solution 3 - Angular

Solution 4 - Angular

How to Inspect Element using Safari Browser

Module compiled with swift 3.0 cannot be imported in Swift 3.0.1

Attributions