You should add the ngDefaultControl attribute to your input like this:

    &lt;md-input
        [(ngModel)]=&quot;recipient&quot;
        name=&quot;recipient&quot;
        placeholder=&quot;Name&quot;
        class=&quot;col-sm-4&quot;
        (blur)=&quot;addRecipient(recipient)&quot;
        ngDefaultControl&gt;
    &lt;/md-input&gt;

Taken from comments in this post:

https://stackoverflow.com/questions/38958347/angular2-rc-5-custom-input-no-value-accessor-for-form-control-with-unspecified

**Note: For later versions of @angular/material:**

Nowadays you should instead write:

    &lt;md-input-container&gt;
        &lt;input
            mdInput
            [(ngModel)]=&quot;recipient&quot;
            name=&quot;recipient&quot;
            placeholder=&quot;Name&quot;
            (blur)=&quot;addRecipient(recipient)&quot;&gt;
    &lt;/md-input-container&gt;

See https://material.angular.io/components/input/overview

Make sure you import MaterialModule as well since you are using md-input which does not belong to FormsModule

I am using pyspark to read a parquet file like below:

    my_df = sqlContext.read.parquet(&#39;hdfs://myPath/myDB.db/myTable/**&#39;)

Then when I do `my_df.take(5)`, it will show `[Row(...)]`, instead of a table  format like when we use the pandas data frame.

Is it possible to display the data frame in a table format like pandas data frame? Thanks!

Pyspark: display a spark data frame in a table format

I am returning a file from a WebAPI controller. The Content-Disposition header value is automatically set to &quot;attachment&quot;. For example:

&gt; Disposition: attachment; filename=&quot;30956.pdf&quot;; filename*=UTF-8&#39;&#39;30956.pdf

When it is set to attachment the browser will ask to save file instead of opening it. I would like it to open it.

How can I set it to &quot;inline&quot; instead of &quot;attachment&quot;?

I am sending the file using this method:

&lt;!-- language: c# --&gt;

    public IActionResult GetDocument(int id)
    {
        var filename = $&quot;folder/{id}.pdf&quot;;
        var fileContentResult = new FileContentResult(File.ReadAllBytes(filename), &quot;application/pdf&quot;)
        {
            FileDownloadName = $&quot;{id}.pdf&quot;
        };
        // I need to delete file after me
        System.IO.File.Delete(filename);
    
        return fileContentResult;
    }

ASP.Net Core Content-Disposition attachment/inline

I got this error after upgrading to Angular 2 Rc.5.
This is my component template:

    &lt;md-input
        [(ngModel)]=&quot;recipient&quot;
        name=&quot;recipient&quot;
        placeholder=&quot;Name&quot;
        class=&quot;col-sm-4&quot;
        (blur)=&quot;addRecipient(recipient)&quot;&gt;
    &lt;/md-input&gt;

My app.module.ts imports the `FormsModule`

I also tried to declare `private recipient;` in my component.

Am I missing something? Why do I get this error?

    No value accessor for form control with name: &#39;recipient&#39;



No value accessor for form control with name: &#39;recipient&#39;

I got this error after upgrading to Angular 2 Rc.5.
This is my component template:
<pre><code class="hljs language-ini">&#x3C;md-input
 [(ngModel)]="recipient"
 name="recipient"
 placeholder="Name"
 class="col-sm-4"
 (blur)="addRecipient(recipient)">
&#x3C;/md-input>
</code></pre>
My app.module.ts imports the <code>FormsModule</code>
I also tried to declare <code>private recipient;</code> in my component.
Am I missing something? Why do I get this error?
<pre><code class="hljs language-csharp">No value accessor for form control with name: 'recipient'
</code></pre>

I can&#39;t seem to fix this error. I have a search bar and an ngFor. I am trying to filter the array using a custom pipe like this:

&lt;!-- language: typescript --&gt;

    import { Pipe, PipeTransform } from &#39;@angular/core&#39;;
    
    import { User } from &#39;../user/user&#39;;
    
    @Pipe({
      name: &#39;usersPipe&#39;,
      pure: false
    })
    export class UsersPipe implements PipeTransform {
      transform(users: User [], searchTerm: string) {
        return users.filter(user =&gt; user.name.indexOf(searchTerm) !== -1);
      }
    }

Usage:

&lt;!-- language: xml --&gt;

    &lt;input [(ngModel)]=&quot;searchTerm&quot; type=&quot;text&quot; placeholder=&quot;Search users&quot;&gt;
    
    &lt;div *ngFor=&quot;let user of (users | usersPipe:searchTerm)&quot;&gt;
    ...
    &lt;/div&gt;

Error:

    zone.js:478 Unhandled Promise rejection: Template parse errors:
    The pipe &#39;usersPipe&#39; could not be found (&quot;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div  
        [ERROR -&gt;]*ngFor=&quot;let user of (user | usersPipe:searchTerm)&quot;&gt;

Angular versions:

    &quot;@angular/common&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;@angular/compiler&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;@angular/core&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;@angular/platform-browser&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;@angular/router&quot;: &quot;3.0.0-rc.1&quot;,
    &quot;@angular/forms&quot;: &quot;0.3.0&quot;,
    &quot;@angular/http&quot;: &quot;2.0.0-rc.5&quot;,
    &quot;es6-shim&quot;: &quot;^0.35.0&quot;,
    &quot;reflect-metadata&quot;: &quot;0.1.3&quot;,
    &quot;rxjs&quot;: &quot;5.0.0-beta.6&quot;,
    &quot;systemjs&quot;: &quot;0.19.26&quot;,
    &quot;bootstrap&quot;: &quot;^3.3.6&quot;,
    &quot;zone.js&quot;: &quot;^0.6.12&quot;

The pipe &#39; &#39; could not be found angular2 custom pipe

I just upgraded to Angular RC 5 and now all component that uses &#39;ROUTER_DIRECTIVES&#39; fails with &#39;Can&#39;t resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?)&#39; when I try to unit test the component. 


    import { inject, addProviders } from &#39;@angular/core/testing&#39;;
    import { ComponentFixture, TestComponentBuilder } from &#39;@angular/core/testing&#39;;
    import { Component } from &#39;@angular/core&#39;;
    import { ROUTER_DIRECTIVES, Router } from &#39;@angular/router&#39;;
    
    import { HomeComponent } from &#39;./home.component&#39;;
    import { UserService } from &#39;../_services/user.service&#39;;
    
    describe(&#39;Component: Home&#39;, () =&gt; {
    
      beforeEach(() =&gt; {
        addProviders([HomeComponent, UserService, ROUTER_DIRECTIVES, Router]);
      });  
    
      it(&#39;should inject the component&#39;, inject([HomeComponent, UserService, ROUTER_DIRECTIVES, Router],
        (component: HomeComponent) =&gt; {
          expect(component).toBeTruthy();
          // expect(component.currentUser.firstname).toEqual(&#39;Jan&#39;);
        }));

The full error log: 

         Chrome 52.0.2743 (Windows 10 0.0.0)
       Error: Can&#39;t resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?).
           at new BaseException (webpack:///C:/ng/anbud/~/@angular/compiler/src/facade/exceptions.js:27:0 &lt;- src/test.ts:2943:23)
           at CompileMetadataResolver.getDependenciesMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:551:0 &lt;- src/test.ts:24542:19)
           at CompileMetadataResolver.getTypeMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:448:0 &lt;- src/test.ts:24439:26)
           at webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:594:0 &lt;- src/test.ts:24585:41
           at Array.forEach (native)
           at CompileMetadataResolver.getProvidersMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:575:0 &lt;- src/test.ts:24566:19)
           at CompileMetadataResolver.getNgModuleMetadata (webpack:///C:/ng/anbud/~/@angular/compiler/src/metadata_resolver.js:305:0 &lt;- src/test.ts:24296:58)
           at RuntimeCompiler._compileComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:150:0 &lt;- src/test.ts:37986:47)
           at RuntimeCompiler._compileModuleAndAllComponents (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:78:0 &lt;- src/test.ts:37914:37)
           at RuntimeCompiler.compileModuleAndAllComponentsSync (webpack:///C:/ng/anbud/~/@angular/compiler/src/runtime_compiler.js:52:0 &lt;- src/test.ts:37888:21)

Any ideas how to unit test components with routing? 


Can&#39;t resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?) in Angular RC 5 when unit testing

I have an array:

    this.questions = [
          {id: 1, question: &quot;Do you feel a connection to a higher source and have a sense of comfort knowing that you are part of something greater than yourself?&quot;, category: &quot;Spiritual&quot;, subs: []},
          {id: 2, question: &quot;Do you feel you are free of unhealthy behavior that impacts your overall well-being?&quot;, category: &quot;Habits&quot;, subs: []},
          {id: 3, question: &quot;Do you feel you have healthy and fulfilling relationships?&quot;, category: &quot;Relationships&quot;, subs: []},
          {id: 4, question: &quot;Do you feel you have a sense of purpose and that you have a positive outlook about yourself and life?&quot;, category: &quot;Emotional Well-being&quot;, subs: []},
          {id: 5, question: &quot;Do you feel you have a healthy diet and that you are fueling your body for optimal health? &quot;, category: &quot;Eating Habits &quot;, subs: []},
          {id: 6, question: &quot;Do you feel that you get enough rest and that your stress level is healthy?&quot;, category: &quot;Relaxation &quot;, subs: []},
          {id: 7, question: &quot;Do you feel you get enough physical activity for optimal health?&quot;, category: &quot;Exercise &quot;, subs: []},
          {id: 8, question: &quot;Do you feel you practice self-care and go to the doctor regularly?&quot;, category: &quot;Medical Maintenance&quot;, subs: []},
          {id: 9, question: &quot;Do you feel satisfied with your income and economic stability?&quot;, category: &quot;Financial&quot;, subs: []},
          {id: 10, question: &quot;Do you feel you do fun things and laugh enough in your life?&quot;, category: &quot;Play&quot;, subs: []},
          {id: 11, question: &quot;Do you feel you have a healthy sense of balance in this area of your life?&quot;, category: &quot;Work-life Balance&quot;, subs: []},
          {id: 12, question: &quot;Do you feel a sense of peace and contentment  in your home? &quot;, category: &quot;Home Environment&quot;, subs: []},
          {id: 13, question: &quot;Do you feel that you are challenged and growing as a person?&quot;, category: &quot;Intellectual Wellbeing&quot;, subs: []},
          {id: 14, question: &quot;Do you feel content with what you see when you look in the mirror?&quot;, category: &quot;Self-image&quot;, subs: []},
          {id: 15, question: &quot;Do you feel engaged at work and a sense of fulfillment with your job?&quot;, category: &quot;Work Satisfaction&quot;, subs: []}
    
        ];

I have a function:

    getDimensions(id) {    
       //need logic to get object from questions array based on ID.      
    }

How can I write a map to get the correct object form the array based on ID?

Angular get object from array by Id

I&#39;m following [this tutorial from angular.io][1]

As they said, I&#39;ve created hero.spec.ts file to create unit tests:

    import { Hero } from &#39;./hero&#39;;
    describe(&#39;Hero&#39;, () =&gt; {
      it(&#39;has name&#39;, () =&gt; {
        let hero: Hero = {id: 1, name: &#39;Super Cat&#39;};
        expect(hero.name).toEqual(&#39;Super Cat&#39;);
      });
      it(&#39;has id&#39;, () =&gt; {
        let hero: Hero = {id: 1, name: &#39;Super Cat&#39;};
        expect(hero.id).toEqual(1);
      });
    });
Unit Tests work like a charm. The problem is: I see some errors, which are mentioned in tutorial:

&gt; Our editor and the compiler may complain that they don’t know what `it`
&gt; and `expect` are because they lack the typing files that describe
&gt; Jasmine. We can ignore those annoying complaints for now as they are
&gt; harmless.

And they indeed ignored it. Even though those errors are harmless, it doesn&#39;t look good in my output console when I receive bunch of them.

Example of what I get:
&gt; Cannot find name &#39;describe&#39;.
&gt;
&gt; Cannot find name &#39;it&#39;.
&gt;
&gt; Cannot find name &#39;expect&#39;.

What can I do to fix it?

  [1]: https://angular.io/docs/ts/latest/guide/testing.html#!#jasmine-101

Angular 2 Unit Tests: Cannot find name &#39;describe&#39;

I have a set of angular2 components that should all get some service injected. My first thought was that it would be best to create a super class and inject the service there. Any of my components would then extend that superclass but this approach does not work.

Simplified example:

    export class AbstractComponent {
      constructor(private myservice: MyService) {
        // Inject the service I need for all components
      }
    }
    
    export MyComponent extends AbstractComponent {
      constructor(private anotherService: AnotherService) {
        super(); // This gives an error as super constructor needs an argument
      }
    }

I could solve this by injecting `MyService` within each and every component and use that argument for the `super()` call but that&#39;s definetly some kind of absurd.

How to organize my components correctly so that they inherit a service from the super class?

Inheritance and dependency injection

I want to extend Express Session typings to allow use my custom data in session storage. I have an object `req.session.user` which is an instance of my class `User`:

    export class User {
        public login: string;
        public hashedPassword: string;

        constructor(login?: string, password?: string) {
            this.login = login || &quot;&quot; ;
            this.hashedPassword = password ? UserHelper.hashPassword(password) : &quot;&quot;;
        }
    }
So i created my `own.d.ts` file to merge definition with existing express session typings:

    import { User } from &quot;./models/user&quot;;

    declare module Express {
        export interface Session {
            user: User;
        }
    }

But it&#39;s not working at all - VS Code and tsc don&#39;t see it. So I created test definition with simple type:

    declare module Express {
        export interface Session {
            test: string;
        }
    }
And the test field is working ok, so the import cause problem.

I also tried to add `/// &lt;reference path=&#39;models/user.ts&#39;/&gt;` instead import but the tsc didn&#39;t see the User class - how can I use my own class in *d.ts file?

**EDIT:**
I set tsc to generate definition files on compile and now I have my user.d.ts:

    export declare class User {
        login: string;
        hashedPassword: string;
        constructor();
        constructor(login: string, password: string);
    }

And the own typing file for extending Express Sesion:

    import { User } from &quot;./models/user&quot;;
    declare module Express {
        export interface Session {
            user: User;
            uuid: string;
        }
    }

But still not working when import statement on top. Any ideas?

Import class in definition file (*d.ts)

I have a npm module called RiveScript that usually (in Javascript) gets instantiated that way:

    var RiveScript = require(&#39;rivescript&#39;);
    var rivescript = new RiveScript();

I&#39;m trying to write a declaration file for the module, but am stuck at the first step. Here&#39;s what I&#39;ve written so far:

    declare module &quot;rivescript&quot; {
    	
    	interface RivescriptOptions {
    		utf8?: boolean;
    	}
    	
    	class RiveScript {
    		constructor(options?: RivescriptOptions);
    	}
    	
    	export default RiveScript;
    }

Then I guess in Typescript I would be using the module this way (*default import*):

    import RiveScript from &#39;rivescript&#39;;
    let rivescript = new RiveScript();

However, `tsc` generates this, which is not valid as it references a `default()` function:

    const rivescript_1 = require(&#39;rivescript&#39;);
    let rivescript = new rivescript_1.default();

What am I doing wrong?

Write a declaration file for a default export module

Can anyone please clarify to me how should I structure multiple nested feature modules hierarchy with `.forRoot()` calls?

For example what if I have modules like this:

```
- MainModule
- SharedModule
- FeatureModuleA
    - FeatureModuleA1
    - FeatureModuleA2
- FeatureModuleB
```
All feature modules has a `.forRoot()` static function. 

How should I define *FeatureModuleA* with somehow &quot;transfer&quot; the `.forRoot()` functions?

```typescript
@NgModule({ 
  imports: [
    //- I can use .forRoot() calls here but this module not the root module
    //- I don&#39;t need to import sub-modules here, FeatureA only a wrapper
    //FeatureModuleA1.forRoot(), //WRONG!
    //FeatureModuleA2.forRoot(), //WRONG!
  ],
  exports: [
    //I cannot use .forRoot() calls here
    FeatureModuleA1, 
    FeatureModuleA2 
  ]
})
class FeatureModuleA {
  static forRoot(): ModuleWithProviders {
    return {
      //At this point I can set any other class than FeatureModuleA for root
      //So lets create a FeatureRootModuleA class: see below!
      ngModule: FeatureModuleA //should be: FeatureRootModuleA 
    };
  }
}
````

I can create another class for root usage then set it within the `forRoot()` function of FeatureModuleA: 

```typescript
@NgModule({
  imports: [
    //Still don&#39;t need any sub module within this feature module
  ]
  exports: [
    //Still cannot use .forRoot() calls but still need to export them for root module too:
    FeatureModuleA1, 
    FeatureModuleA2 
  ]
})
class FeatureRootModuleA { }
```

&gt; But how can I &quot;transfer&quot; `.forRoot()` calls within this special ModuleClass?

As I see I need to import all sub-modules directly into my root MainModule and call `.forRoot()` for each there:

```typescript
@NgModule({
  imports: [
    FeatureModuleA1.forRoot(),
    FeatureModuleA2.forRoot(),
    FeatureModuleA.forRoot(),
    SharedModule.forRoot()
  ]
})
class MainModule { }
```

Am I right? Before you answer please take a look at this file:
https://github.com/angular/material2/blob/master/src/lib/module.ts

As I know this repo is maintained by the official angular team. So they solve the above by just importing all `.forRoot()` calls within a special MaterialRootModule module. I don&#39;t really understand how it would be applied for my own root module? What does the **root** and **.forRoot** really mean here? Is that relative to the package and not to the actual web project?

How to use .forRoot() within feature modules hierarchy

Is there any possible way to change size of `mat-spinner` or `mat-progress-circle`?

I read the documentation of `mat-spinner` and `mat-progress-circle` but they said that `mat-diameter` is discontinued and the spinner will take the parent element&#39;s size. 

How can I put `mat-spinner` in a `mat-button` to the left corner without changing the height of the button?

    &lt;button mat-button&gt;
       &lt;mat-spinner style=&quot;float:left;&quot;&gt;&lt;/mat-spinner&gt; 
       processing....
    &lt;/button&gt;

I also tried to change the height using in-line css like 

    style=&quot;float:left;height:10px;width:10px;
but is not pretty to see.

angular/material2 mat-spinner resize

Recently, the successor to MDL (Material Design Lite) project was launched as [Material Components for the Web][1]. One of its goals is &quot;Seamless integration with other JS frameworks and libraries&quot;. 

There is another project [Angular Material2][2] which provides material design components specifically for Angular (v2+). 

Both projects are creating material design based **UI components**. Also, they have similar set of components [ready][3]/[in-active-development][4], and same set of components as coming-soon (listed [here][3] and [here][5]).

Can someone please help me understand the overlap between 2 projects and which one should I pick for new projects? 

At a fundamental level, I do understand Angular Material2 will more seamlessly and tightly integrate with Angular projects, while Material Components for the Web will provide hooks for multiple JS frameworks to use. But I fail to see reason for overlap and which one will have more momentum (read more components). 


  [1]: https://github.com/material-components/material-components-web
  [2]: https://github.com/angular/material2
  [3]: https://github.com/angular/material2#available-features
  [4]: https://github.com/material-components/material-components-web/tree/master/packages
  [5]: https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&amp;q=is%3Aopen%20is%3Aissue%20label%3Av2-component%20

Material Components for the Web vs Angular Material 2

I want to use my company&#39;s brand colors throughout the app.

I have found this issue: https://stackoverflow.com/questions/37268999/angularjs-2-material-design-set-color-palette where I can build an *allegedly custom* theme, but it&#39;s basically just using different parts of pre-built palettes. I don&#39;t want to use Material2&#39;s predefined colors. I want my unique and special brand colors. Is there a better way (righter?) to create my own theme, than just hack around with `_palette.scss`?

Do I need to make a mixin for my brand palette? If so - any guides on how to do it properly? What are the meanings of the different shades of colors (marked with numbers like: 50, 100, 200, A100, A200...)?

Any information about this area will be much appreciated!

How can I use custom theme palettes in Angular?

In multiple places within angular material source, there are elements/ css classes that have `cdk` as their prefix.

Does anyone know what the abbreviation for `cdk` in angular material context?

Content Type	Original Author	Original Content on Stackoverflow
Question	TheUnreal	View Question on Stackoverflow
Solution 1 - Angular	Peter Salomonsen	View Answer on Stackoverflow
Solution 2 - Angular	Ophir Bushinsky	View Answer on Stackoverflow

No value accessor for form control with name: 'recipient'

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

ASP.Net Core Content-Disposition attachment/inline

Pyspark: display a spark data frame in a table format

Attributions