Read the doc here https://angular.io/guide/structural-directives especially for

&gt;`&lt;div *ngIf=&quot;hero&quot; &gt;{{hero.name}}&lt;/div&gt;`
&gt;
&gt; The asterisk is &quot;syntactic sugar&quot; for something a bit more
&gt; complicated. Internally, Angular desugars it in two stages. First, it
&gt; translates the *ngIf=&quot;...&quot; into a template attribute, template=&quot;ngIf
&gt; ...&quot;,  like this.
&gt;
&gt; `&lt;div template=&quot;ngIf hero&quot;&gt;{{hero.name}}&lt;/div&gt;`
&gt;
&gt; Then it translates the template attribute into a &lt;ng-template&gt;
&gt; element, wrapped around the host element, like this.
&gt; 
&gt; `&lt;ng-template [ngIf]=&quot;hero&quot;&gt;  &lt;div&gt;{{hero.name}}&lt;/div&gt;&lt;/ng-template&gt;`
&gt; 
&gt;  - The *ngIf directive moved to the &lt;ng-template&gt; element where it    became a property binding,[ngIf].
&gt;  - The rest of the &lt;div&gt;, including    its class attribute, moved inside the &lt;ng-template&gt; element.

So for it we have `ng-container`

     &lt;ng-container *ngIf=&quot;seat.section&quot;&gt;
        Section {{seat.section}} ,
     &lt;/ng-container&gt;

or use span or div or regular html tag.

     &lt;span *ngIf=&quot;seat.section&quot;&gt;
        Section {{seat.section}} ,
     &lt;/span&gt;

or if you still want to use ng-template ([not recommended](https://angular.io/guide/structural-directives#prefer-the-asterisk--syntax))

 

    &lt;ng-template [ngIf]=&quot;seat.section&quot;&gt;
      Section {{seat.section}} ,
    &lt;/ng-template&gt;

With the recent versions of dagger 2 one of the improvements made are the possibility of having static provide methods. Simply so:

    @Provides
    static A providesA() {
      return A();
    }

I was wondering how does one go about doing this in kotlin? I&#39;ve tried

    @Module
    class AModule {
      companion object {
        @JvmStatic
        @Provides
        fun providesA(): A = A()
      }
    }

But I get the error message:

    @Provides methods can only be present within a @Module or @ProducerModule

I&#39;m guessing there&#39;s something going on here with the companion object, however I&#39;m quite new to Kotlin and I&#39;m unsure of how one can do this. Is it even possible?

Thanks!

Dagger 2 static provider methods in kotlin

I just started programming Python. I want to use scrapy to create a bot，and it showed 
TypeError: Object of type &#39;bytes&#39; is not JSON serializable when I run the project. 



    import json
    import codecs

    class W3SchoolPipeline(object):
    
      def __init__(self):
          self.file = codecs.open(&#39;w3school_data_utf8.json&#39;, &#39;wb&#39;, encoding=&#39;utf-8&#39;)

      def process_item(self, item, spider):
          line = json.dumps(dict(item)) + &#39;\n&#39;
          # print line

          self.file.write(line.decode(&quot;unicode_escape&quot;))
          return item

-------------------------------


    from scrapy.spiders import Spider
    from scrapy.selector import Selector
    from w3school.items import W3schoolItem

    class W3schoolSpider(Spider):
   
        name = &quot;w3school&quot;
        allowed_domains = [&quot;w3school.com.cn&quot;]
    
        start_urls = [
            &quot;http://www.w3school.com.cn/xml/xml_syntax.asp&quot;
        ]

        def parse(self, response):
            sel = Selector(response)
            sites = sel.xpath(&#39;//div[@id=&quot;navsecond&quot;]/div[@id=&quot;course&quot;]/ul[1]/li&#39;)

        items = []
        for site in sites:
            item = W3schoolItem()
            title = site.xpath(&#39;a/text()&#39;).extract()
            link = site.xpath(&#39;a/@href&#39;).extract()
            desc = site.xpath(&#39;a/@title&#39;).extract()

            item[&#39;title&#39;] = [t.encode(&#39;utf-8&#39;) for t in title]
            item[&#39;link&#39;] = [l.encode(&#39;utf-8&#39;) for l in link]
            item[&#39;desc&#39;] = [d.encode(&#39;utf-8&#39;) for d in desc]
            items.append(item)
            return items


Traceback：






    TypeError: Object of type &#39;bytes&#39; is not JSON serializable
    2017-06-23 01:41:15 [scrapy.core.scraper] ERROR: Error processing       {&#39;desc&#39;: [b&#39;\x
    e4\xbd\xbf\xe7\x94\xa8 XSLT \xe6\x98\xbe\xe7\xa4\xba XML&#39;],
     &#39;link&#39;: [b&#39;/xml/xml_xsl.asp&#39;],
     &#39;title&#39;: [b&#39;XML XSLT&#39;]}

    Traceback (most recent call last):
    File  
    &quot;c:\users\administrator\appdata\local\programs\python\python36\lib\site-p
    ackages\twisted\internet\defer.py&quot;, line 653, in _runCallbacks
        current.result = callback(current.result, *args, **kw)
    File &quot;D:\LZZZZB\w3school\w3school\pipelines.py&quot;, line 19, in process_item
        line = json.dumps(dict(item)) + &#39;\n&#39;
    File 
    &quot;c:\users\administrator\appdata\local\programs\python\python36\lib\json\_
    _init__.py&quot;, line 231, in dumps
        return _default_encoder.encode(obj)
    File 
    &quot;c:\users\administrator\appdata\local\programs\python\python36\lib\json\e
    ncoder.py&quot;, line 199, in encode
        chunks = self.iterencode(o, _one_shot=True)
    File  
    &quot;c:\users\administrator\appdata\local\programs\python\python36\lib\json\e
    ncoder.py&quot;, line 257, in iterencode
        return _iterencode(o, 0)
    File      
    &quot;c:\users\administrator\appdata\local\programs\python\python36\lib\
    json\encoder.py&quot;, line 180, in default
        o.__class__.__name__)
      TypeError: Object of type &#39;bytes&#39; is not JSON serializable


  

TypeError: Object of type &#39;bytes&#39; is not JSON serializable

I have a condition in the template as follows:


    &lt;ng-container&gt;
        &lt;p *ngFor=&quot;let seat of InfoDetails?.seatInfo&quot;&gt;
            &lt;template *ngIf=&quot;seat.section&quot;&gt;
                Section {{seat?.section}} ,
            &lt;/template&gt;
            &lt;template *ngIf=&quot;seat.row&quot;&gt;
                Row {{seat?.row}},
            &lt;/template&gt;
            &lt;template *ngIf=&quot;seat.seatNo&quot;&gt;
                Seat number {{seat?.seatNo}}
            &lt;/template&gt;
        &lt;/p&gt;
    &lt;/ng-container&gt;

I have dataset that contains `row` and `seatNo`, but it does not seem to print in the template. what is the issue here?

why *ngIf doesnt&#39;work with ng-template?

I have a condition in the template as follows:
<pre><code class="hljs language-php-template">&#x3C;ng-container>
 &#x3C;p *ngFor="let seat of InfoDetails?.seatInfo">
 &#x3C;template *ngIf="seat.section">
 Section {{seat?.section}} ,
 &#x3C;/template>
 &#x3C;template *ngIf="seat.row">
 Row {{seat?.row}},
 &#x3C;/template>
 &#x3C;template *ngIf="seat.seatNo">
 Seat number {{seat?.seatNo}}
 &#x3C;/template>
 &#x3C;/p>
&#x3C;/ng-container>
</code></pre>
I have dataset that contains <code>row</code> and <code>seatNo</code>, but it does not seem to print in the template. what is the issue here?

Angular 1 does not accept `onchange()` event, it&#39;s only accepts `ng-change()` event. 

Angular 2, on the other hand, accepts both `(change)` and `(ngModelChange)` events, which both seems to be doing the same thing. 

What&#39;s the difference? 

which one is best for performance?

**ngModelChange**:

    &lt;input type=&quot;text&quot; pInputText class=&quot;ui-widget ui-text&quot;
        (ngModelChange)=&quot;clearFilter()&quot; placeholder=&quot;Find&quot;/&gt;

vs **change**:

    &lt;input type=&quot;text&quot; pInputText class=&quot;ui-widget ui-text&quot; 
        (change)=&quot;clearFilter()&quot; placeholder=&quot;Find&quot;/&gt;

(change) vs (ngModelChange) in angular

        [64, 1]: space indentation expected
        [15, 27]: Missing semicolon
        [109, 36]: missing whitespace
        [111, 24]: missing whitespace
        [70, 1]: Consecutive blank lines are forbidden

I keep getting warnings like these  from TSLint. There are huge amount of warnings, and it will be very difficult to fix it manually.

I was looking for a way which can **auto-fix** most of the warnings.

Auto fix TSLint Warnings

Is there anyway to send data as parameter with router.navigate? 
I mean, something like [this](http://plnkr.co/edit/tUe5fb?p=preview) example, as you can see the route has a data parameter, but doing this it&#39;s not working:

    this.router.navigate([&quot;heroes&quot;], {some-data: &quot;othrData&quot;})

because some-data is not a valid parameter. How can I do that? I don&#39;t want to send the parameter with queryParams.

Send data through routing paths in Angular

i need your help, i&#39;m trying to display some datas from my firebase but it trhows me an error like `InvalidPipeArgument: &#39;[object Object]&#39; for pipe &#39;AsyncPipe&#39;`.

----------
There is my service: 

    import { Injectable } from &#39;@angular/core&#39;;
    import { AngularFireDatabase } from &#39;angularfire2/database&#39;;

    @Injectable()
    export class MoviesService {

      constructor(private db: AngularFireDatabase) {}
      get = () =&gt; this.db.list(&#39;/movies&#39;);
    }

----------
There is my component:

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { MoviesService } from &#39;./movies.service&#39;;

    @Component({
      selector: &#39;app-movies&#39;,
      templateUrl: &#39;./movies.component.html&#39;,
      styleUrls: [&#39;./movies.component.css&#39;]
    })
    export class MoviesComponent implements OnInit {
      movies: any[];

      constructor(private moviesDb: MoviesService) { }

      ngOnInit() {
        this.moviesDb.get().subscribe((snaps) =&gt; {
          snaps.forEach((snap) =&gt; {
            this.movies = snap;
            console.log(this.movies);
          });
       });
     }
    }


----------
And there is mmy pug:

    ul
      li(*ngFor=&#39;let movie of (movies | async)&#39;)
        | {{ movie.title | async }}



Angular 4: InvalidPipeArgument: &#39;[object Object]&#39; for pipe &#39;AsyncPipe&#39;

I&#39;m working on an `Electron app` with Angular 4. I want to play sound on some specific action. Is there any module or code for that? It can be in the angular 4 or if electron is providing some service for that it should also work

As I want to play it on some action I can&#39;t use the HTML audio tag and audio() of javascript

I only want to play the sound of 2-3 seconds so no other functionalities are needed.

It can be of electron or Angular 4 any of them can work...

Play sound in Angular 4

How is the following keyword used in angular2 ng-templates

 - What is the purpose of `$implicit` in angular 2 templates? 
 - What is relationship between `let-&lt;attribute&gt;` and `$implicit`?

What is $implicit in angular 2?

I am trying to build this template:

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;li *ngFor=&#39;let link of links&#39;&gt;
            &lt;ng-container *ngIf=&quot;link.type == &#39;complex&#39;; then complexLink else simpleLink&quot;&gt;&lt;/ng-container&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;ng-template #simpleLink&gt;
        ...
        {{ link.some_property }}
    &lt;/ng-template&gt;
    
    &lt;ng-template #complexLink&gt;
        ...
        {{ link.some_property }}
    &lt;/ng-template&gt;

The problem is that the link variable is undefined inside the ng-template so I get an error of accessing &#39;some_property&#39; of undefined.

I am struggeling to understand how I pass the link variable from the ngFor to the ng-template

It would be great to know if there are multiple solutions for this problem.

Content Type	Original Author	Original Content on Stackoverflow
Question	user7426734	View Question on Stackoverflow
Solution 1 - Angular	Fetrarij	View Answer on Stackoverflow

why *ngIf doesnt'work with ng-template?

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

TypeError: Object of type 'bytes' is not JSON serializable

Dagger 2 static provider methods in kotlin

Attributions