You could used attribute binding. Something like that:

    [attr.data-target]=&quot;&#39;#&#39; + theme.themeId&quot;

Yes exactly you can use

    *ngFor=&quot;a of Array; index as i;&quot;

and

    [attr.data-target]=&quot;&#39;#test&#39; + i&quot;

and

    name=&quot;test{{i}}

To pass a variable in Angular 7 you can use it just like:

    [attr.data-target] = &quot;theme.themeId&quot;



In blade template i use last() method to find last iteration of foreach loop:

    @foreach ($colors as $k =&gt; $v)
       &lt;option value={!! $v-&gt;id !!} {{ $colors-&gt;last()-&gt;id==$v-&gt;id ? &#39;selected&#39;:&#39;&#39; }} &gt; {!! $v-&gt;name !!} &lt;/option&gt;
    @endforeach

Is it ok? Perhaps there is a Laravel-style way to do the same?

Find last iteration of foreach loop in laravel blade

I can&#39;t figure out why ReactJs is finding &quot;string&quot; instead of my click handler methods.

This is my code:

    define([&quot;react&quot;], function(React) {


	return React.createClass({

		pageUp: function() {
			console.log(&quot;go next page&quot;);
		},

		pageDown: function() {
			console.log(&quot;go prev page&quot;);
		},

		toggleMenu: function() {
			console.log(&quot;toggle menu&quot;);
			this.state.menuStatus = !this.menuStatus;
		},

		getInitialState: function() {
			return {
				// Toggle menu status; false -&gt; closed | true -&gt; opened
				menuStatus: false
			}
		},

		render: function() {
			var _this = this;
			return (
				&lt;div className=&quot;overlay-nav&quot;&gt;
					&lt;ul className=&quot;up-down-arrows&quot;&gt;
						&lt;li onClick=&quot;{this.pageUp}&quot; className=&quot;arrow-up&quot;&gt;&lt;i className=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;&lt;/li&gt;
						&lt;li onClick=&quot;{_this.pageDown.bind(_this)}&quot; className=&quot;arrow-down&quot;&gt;&lt;i className=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;&lt;/li&gt;
					&lt;/ul&gt;

					&lt;div onClick=&quot;{_this.toggleMenu}&quot; className=&quot;toggleMenu&quot;&gt;&lt;i className=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;/div&gt;
			);
		}
	});
});

I already tried to use

    var _this = _this
    // ....
    &lt;li onClick=&quot;_this.pageUp&quot; ...

and binds like

    &lt;li onClick=&quot;{this.pageUp.bind(this)}&quot;

But when I refresh the page, I always get this error:

The error I get is:

    Error: Expected onClick listener to be a function, instead got type string(…)

Any help is much appreciate.

tks

ReactJS: Expected onClick listener to be a function, instead got type string

I&#39;m working with angular 2 typescript and i want to create a toggle collapse list.
This is simple with single id and `data-target` but i loop throught a list so i have dynamic id names. I want to pass a variable in my `data-target` so i can reach the dynamic names of the id&#39;s. something like this:

   `&lt;a data-toggle=&quot;collapse&quot; data-target=&quot;#{{theme.themeId}}&gt;collapseHere &lt;/a&gt;`
but this gives me a syntax error. 

Is it possibly to pass variables with a `data-target`?

How to pass variable to &quot;data-target=&quot; angular 2

I'm working with angular 2 typescript and i want to create a toggle collapse list.
This is simple with single id and <code>data-target</code> but i loop throught a list so i have dynamic id names. I want to pass a variable in my <code>data-target</code> so i can reach the dynamic names of the id's. something like this:
<code>&#x3C;a data-toggle="collapse" data-target="#{{theme.themeId}}>collapseHere &#x3C;/a></code>
but this gives me a syntax error.
Is it possibly to pass variables with a <code>data-target</code>?

I am using TypeScript in my application, where I use function:

    Object.assign(this.success, success.json())

However, during compilation, I receive the following error:

     error TS2339: Property &#39;assign&#39; does not exist on type &#39;ObjectConstructor&#39;.

Do you have any idea how can I get rid of this error?


Property &#39;assign&#39; does not exist on type &#39;ObjectConstructor&#39;

When building typescript in VSCode, I get the following error:

&gt; error TS6082: Only &#39;amd&#39; and &#39;system&#39; modules are supported alongside
&gt; --out.

My settings are as follows:

**tsconfig.json**

    {
    	&quot;compilerOptions&quot;: {
    		&quot;target&quot;: &quot;ES5&quot;,
    		&quot;module&quot;: &quot;commonjs&quot;,
            &quot;out&quot;: &quot;current/game.js&quot;,
            &quot;removeComments&quot;: true,
    		&quot;sourceMap&quot;: false
    	}
    }

**.vscode/tasks.json:**

    {
    	&quot;version&quot;: &quot;0.1.0&quot;,
    
    	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    	&quot;command&quot;: &quot;tsc&quot;,
    
    	// The command is a shell script
    	&quot;isShellCommand&quot;: true,
    
    	// Show the output window only if unrecognized errors occur.
    	&quot;showOutput&quot;: &quot;silent&quot;,
    
    	// args is the HelloWorld program to compile.
    	&quot;args&quot;: [],
    
    	// use the standard tsc problem matcher to find compile problems
    	// in the output.
    	&quot;problemMatcher&quot;: &quot;$tsc&quot;
    }

Despite the error, the game.js file does get created and runs properly.

Anyone have any thoughts about what might cause this error?

Only &#39;amd&#39; and &#39;system&#39; modules are supported alongside --out

If I have the following button in an html file

&lt;!-- language: lang-html --&gt;

    &lt;button (click)=&quot;doSomething(&#39;testing&#39;, $event)&quot;&gt;Do something&lt;/button&gt;
Also, in the corresponding component, I have this function

    doSomething(testString: string, event){
    	event.stopPropagation();
    	console.log(testString + &#39;: I am doing something&#39;);
    }

Is there a proper type that should be assigned to the `$event` input?
The event parameter itself is an object, BUT if I assign it to a type object, I get an error

&gt; Property &#39;stopPropogation&#39; does not exist on type object

So, what does Typescript consider the `$event` input?

What Typescript type is Angular2 event

How do you test a private function in angular 2 ?

    class FooBar {
    
        private _status: number;
    
        constructor( private foo : Bar ) {
            this.initFooBar();
            
        }
    
        private initFooBar(){
            this.foo.bar( &quot;data&quot; );
            this._status = this.fooo.foo();
        }

        public get status(){
            return this._status;
        }
    
    }

The solution I found 

1. Put the test code itself inside the closure or Add code inside the closure that stores references to the local variables on existing objects in the outer scope. 
   
   Later strip out the test code using a tool.
   http://philipwalton.com/articles/how-to-unit-test-private-functions-in-javascript/



Please suggest me a better way to solve this problem if you have done any?

P.S 

1. Most of the answer for similar type of question like this one doesn&#39;t give a solution to problem, that&#39;s why I&#39;m asking this question

2. Most of the developer say you Don’t test private functions but I don&#39;t say they are wrong or right, but there are necessities for my case to test private.

How to write unit testing for Angular / TypeScript for private methods with Jasmine

Suppose I have a pure abstract class (that is, an abstract class without any implementation):

    abstract class A {
        abstract m(): void;
    }

Like in C# and Java, I can **extend** the abstract class:

    class B extends A {
        m(): void { }
    }

But *unlike* in C# and Java, I can also **implement** the abstract class:

    class C implements A {
        m(): void { }
    }

How do classes `B` and `C` behave differently? Why would I choose one versus the other?

(Currently, the TypeScript [handbook](http://www.typescriptlang.org/Handbook) and [language specification](https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md) don&#39;t cover abstract classes.)

Extending vs. implementing a pure abstract class in TypeScript

I have been reading the Angular 1 to 2 quick reference in the &lt;a href=&quot;https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html&quot;&gt;Angular website&lt;/a&gt;, and one thing I didn&#39;t completely understand was the difference between these special characters. For example one that uses asterisks:


```html
&lt;tr *ngFor=&quot;#movie of movies&quot;&gt;
   &lt;td&gt;{{movie.title}}&lt;/td&gt;
&lt;/tr&gt;
```

I understand here that the hash (#) symbol defines `movie` as a local template variable, but what does the asterisk before `ngFor` mean? And, is it necessary?

Next, are the examples that use brackets:

```html
&lt;a [routerLink]=&quot;[&#39;Movies&#39;]&quot;&gt;Movies&lt;/a&gt;
```

I somewhat understand that the brackets around `routerLink` bind it to that HTML attribute / Angular directive. Does this mean that they are a pointer for Angular to evaluate an expression? Like `[id]=&quot;movieId&quot;` would be the equivalent of `id=&quot;movie-{{movieId}}&quot;` in Angular 1?

Lastly, are parentheses:

```html
&lt;button (click)=&quot;toggleImage($event)&quot;&gt;
```

Are these only used for DOM events and can we use other events like `(load)=&quot;someFn()&quot;` or `(mouseenter)=&quot;someFn()&quot;`?

 
I guess the real question is, do these symbols have a special meaning in Angular 2, and what is the easiest way to know **when to use each one**? Thanks!!

What is the difference between parentheses, brackets and asterisks in Angular2?

I&#39;d like to bind a select element to a list of objects -- which is easy enough:
```typescript
@Component({
   selector: &#39;myApp&#39;,
   template: 
      `&lt;h1&gt;My Application&lt;/h1&gt;
       &lt;select [(ngModel)]=&quot;selectedValue&quot;&gt;
          &lt;option *ngFor=&quot;#c of countries&quot; value=&quot;c.id&quot;&gt;{{c.name}}&lt;/option&gt;
       &lt;/select&gt;`
    })
export class AppComponent{
   countries = [
      {id: 1, name: &quot;United States&quot;},
      {id: 2, name: &quot;Australia&quot;}
      {id: 3, name: &quot;Canada&quot;},
      {id: 4, name: &quot;Brazil&quot;},
      {id: 5, name: &quot;England&quot;}
   ];
   selectedValue = null;
}
```
In this case, it appears that `selectedValue` would be a number -- the id of the selected item.

However, I&#39;d actually like to bind to the country object itself so that `selectedValue` is the object rather than just the id.  I tried changing the value of the option like so:

    &lt;option *ngFor=&quot;#c of countries&quot; value=&quot;c&quot;&gt;{{c.name}}&lt;/option&gt;

but this does not seem to work.  It seems to place an object in my `selectedValue` -- but not the object that I&#39;m expecting.  You can [see this in my Plunker example][1].

I also tried binding to the change event so that I could set the object myself based on the selected id; however, it appears that the change event fires before the bound ngModel is updated -- meaning I don&#39;t have access to the newly selected value at that point.

Is there a clean way to bind a select element to an object with Angular 2?

  [1]: http://plnkr.co/edit/HGRGv33EFwxDsSnELofk?p=preview

Binding select element to object in Angular

&lt;!-- language-all: lang-js --&gt;

How do I mock sub component in jasmine tests?

I have `MyComponent`, which uses `MyNavbarComponent` and `MyToolbarComponent`

    import {Component} from &#39;angular2/core&#39;;
    import {MyNavbarComponent} from &#39;./my-navbar.component&#39;;
    import {MyToolbarComponent} from &#39;./my-toolbar.component&#39;;
    
    @Component({
      selector: &#39;my-app&#39;,
      template: `
        &lt;my-toolbar&gt;&lt;/my-toolbar&gt;
        {{foo}}
        &lt;my-navbar&gt;&lt;/my-navbar&gt;
      `,
      directives: [MyNavbarComponent, MyToolbarComponent]
    })
    export class MyComponent {}

When I test this component, I do not want to load and test those two sub components; MyNavbarComponent, MyToolbarComponent, so I want to mock it.

I know how to mock with services using `provide(MyService, useClass(...))`, but I have no idea how to mock directives; components;

      beforeEach(() =&gt; {
        setBaseTestProviders(
          TEST_BROWSER_PLATFORM_PROVIDERS,
          TEST_BROWSER_APPLICATION_PROVIDERS
        );
        
        //TODO: want to mock unnecessary directives for this component test
        // which are MyNavbarComponent and MyToolbarComponent
      })
      
      it(&#39;should bind to {{foo}}&#39;, injectAsync([TestComponentBuilder], (tcb) =&gt; {
        return tcb.createAsync(MyComponent).then((fixture) =&gt; {
          let DOM = fixture.nativeElement;
          let myComponent = fixture.componentInstance;
          myComponent.foo = &#39;FOO&#39;;
          fixture.detectChanges();
          expect(DOM.innerHTML).toMatch(&#39;FOO&#39;);
        });
      });

Here is my plunker example;

http://plnkr.co/edit/q1l1y8?p=preview

angular2 test, how do I mock sub component

In Angular 1 I could select the default option for a drop down box using the following:

    &lt;select 
        data-ng-model=&quot;carSelection&quot;
        data-ng-options = &quot;x.make for x in cars&quot; data-ng-selected=&quot;$first&quot;&gt;
    &lt;/select&gt;


In Angular 2 I have: 

    &lt;select class=&quot;form-control&quot; [(ngModel)]=&quot;selectedWorkout&quot; (ngModelChange)=&quot;updateWorkout($event)&quot;&gt;
        &lt;option *ngFor=&quot;#workout of workouts&quot;&gt;{{workout.name}}&lt;/option&gt;
    &lt;/select&gt;

How could I select a default option given my option data is:

`[{name: &#39;arm&#39;}, {name: &#39;back&#39;}, {name:&#39;leg&#39;}]` and my value I to default on on is `back`?


Content Type	Original Author	Original Content on Stackoverflow
Question	Kupi	View Question on Stackoverflow
Solution 1 - Typescript	Thierry Templier	View Answer on Stackoverflow
Solution 2 - Typescript	Mayur Saner	View Answer on Stackoverflow
Solution 3 - Typescript	harshit raghav	View Answer on Stackoverflow

How to pass variable to "data-target=" angular 2

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

Solution 2 - Typescript

Solution 3 - Typescript

ReactJS: Expected onClick listener to be a function, instead got type string

Find last iteration of foreach loop in laravel blade

Attributions