If your image property contains ... 

**Image used as** `&lt;img&gt;` **element**

    image?: HTMLImageElement

----------
**URL to image.**

    image?: String

----------
**Image as file from** `&lt;input&gt;` **element**

    image?: File

----------

I am using Vue.js 2.0 and Vuex 2.0 for a small app. I am initializing the store in the &#39;created&#39; life-cycle hook on the root Vue instance by calling an action that retrieves the initial state from an API....like so in my **Root Component**: 

```javascript
const app = new Vue({
    el: &quot;#app&quot;,
    router,
    store,
    data: {
        vacation: {},
    },
    components: {
        &#39;vacation-status&#39;: VacationStatus,
    },
    created() {
        //initialize store data structure by submitting action.
        this.$store.dispatch(&#39;getVacation&#39;);
    },
    computed: {},
    methods: {}
});
```

This is working just fine. Here is the action on my store that I&#39;m calling here:

```javascript
getVacation({ commit }) {
    api.getVacation().then(vacation =&gt; commit(UPDATE_VACATION, vacation))
}
```

The mutation that this is committing with &#39;UPDATE_VACATION&#39; is here: 

```javascript
[UPDATE_VACATION] (state, payload) {
   state.vacation = payload.vacation;
},
```

**My Problem:** When I load the app, all my components that are &#39;getting&#39; values from the store throw errors I&#39;m trying to access &#39;undefined&#39; values on the store. In other words, state hasn&#39;t been initialized yet. 

For example, I have a component that has getters in **Child Components** like this:

```javascript
computed: {
    arrival() {
        return this.$store.getters.arrival
    },
    departure() {
        return this.$store.getters.departure
    },
    countdown: function() {
        return this.$store.getters.countdown
    }
}
```

All these getters cause errors because &#39;vacation&#39; is undefined on the state object. It seems like an asynchronous problem to me, but could be wrong. **Am I initializing my store state in the wrong spot?** 

```javascript
Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    getters: {
        getVacation: state =&gt; {
            return state.vacation
        },
        guests: state =&gt; {
            return state.vacation.guests
        },
        verifiedGuests: state =&gt; {
            return state.vacation.guests.filter(guest =&gt; guest.verified)
        },
        emergencyContacts: state =&gt; {
            return state.emergency_contacts
        },
        arrival: state =&gt; {
            return state.vacation.check_in
        },
        departure: state =&gt; {
            return state.vacation.check_out
        },
        countdown: state =&gt; {
            let check_in = new Date(state.vacation.check_in);
            let now = new Date();

            if ((now - check_in) &gt; 0) {
                return &#39;This vacation started on &#39; + check_in;
            }

            let difference = check_in - now;
            let day = 1000 * 60 * 60 * 24;

            return Math.ceil(difference / day) + &quot; days until your vacation&quot;;
        }
    },
    mutations: {
        [UPDATE_VACATION](state, payload) {
            state.vacation = payload.vacation;
        },
        [ADD_GUEST](state, payload) {
            state.vacation.guests.push(payload.guest);
        },
        [REMOVE_GUEST](state, payload) {
            state.vacation.guests.filter(guest =&gt; {
                debugger;
                return guest.id != payload.guest.id
            })
        },
        [UPDATE_GUEST](state, payload) {
            state.vacation.guests.map(guest =&gt; {
                // Refactor Object.assign to deep cloning of object
                return guest.id === payload.guest.id ? Object.assign({}, guest, payload.guest) : guest;
            })
        },
        [ADD_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.push(payload.emergency_contact)
        },
        [REMOVE_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.filter(contact =&gt; contact.id !== payload.emergency_contact.id)
        },
        [UPDATE_EMERGENCY](state, payload) {
            state.vacation.emergency_contacts.map(contact =&gt; {
                // Refactor not needed because emergency_contact is a shallow object.
                return contact.id === payload.emergency_contact.id ? Object.assign({}, contact, payload.emergency_contact) : contact;
            });
        }
    },
    actions: {
        getVacation({
            commit
        }) {
            api.getVacation().then(vacation =&gt; commit(UPDATE_VACATION, vacation))
        },
        addGuest({
            commit
        }, guest) {
            commit(ADD_GUEST, guest);
        },
        removeGuest({
            commit
        }, guest) {
            commit(REMOVE_GUEST, guest);
        },
        updateGuest({
            commit
        }, guest) {
            commit(UPDATE_GUEST, guest);
        },
        addEmergency({
            commit
        }, guest) {
            commit(ADD_EMERGENCY, contact)
        },
        removeEmergency({
            commit
        }, contact) {
            commit(REMOVE_EMERGENCY, contact)
        },
        updateEmergency({
            commit
        }, contact) {
            commit(UPDATE_EMERGENCY, contact)
        },
        updateServer(store, payload) {
            return api.saveVacation(payload)
        }
    }
});
```

Just so the solution is clear to others: 

I wasn&#39;t setting my initial state quite properly in the store itself. I was pulling in the data, and updating the store correctly, but the store needed to be initialized like this:
 
```javascript
export default new Vuex.Store({
    state: {
        vacation: {} //I added this, and then justed updated this object on create of the root Vue Instance
    },
});
```


How do I set initial state in Vuex 2?

In Bootstrap 3 I use this:

    .something {
        padding: 5px;
        @media screen and (min-width: $screen-sm-min) { 
            padding: 20px;
        }
        @media screen and (min-width: $screen-md-min) { 
            padding: 40px;
        }
    }

How can I do the same thing in Boostrap 4-alpha? I can&#39;t find an example in their docs. 
This is in  variables.scss

    $grid-breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px
    ) !default;
    @include _assert-ascending($grid-breakpoints, &quot;$grid-breakpoints&quot;);
    @include _assert-starts-at-zero($grid-breakpoints);

Using media breakpoints in Bootstrap 4-alpha

I&#39;m declaring an interface which will contains image also. What type do i need to give to it.

    export interface AdInterface {
        email: string;
        mobile: number;
        image?:   ??
    }

In TypeScript, What is the type of Image?

I'm declaring an interface which will contains image also. What type do i need to give to it.
<pre><code class="hljs language-typescript">export interface AdInterface {
 email: string;
 mobile: number;
 image?: ??
}
</code></pre>

I defined my generic type as

    interface IDictionary&lt;TValue&gt; {
        [key: string|number]: TValue;
    }

But TSLint&#39;s complaining. How am I supposed to define an object index type that can have either as key? I tried these as well but no luck.

    interface IDictionary&lt;TKey, TValue&gt; {
        [key: TKey]: TValue;
    }
    
    interface IDictionary&lt;TKey extends string|number, TValue&gt; {
        [key: TKey]: TValue;
    }
    
    type IndexKey = string | number;
    
    interface IDictionary&lt;TValue&gt; {
        [key: IndexKey]: TValue;
    }
    
    interface IDictionary&lt;TKey extends IndexKey, TValue&gt; {
        [key: TKey]: TValue;
    }

**None of the above work.**

## So how then?

Object index key type in Typescript

How can I autofocus input element? Similar to [this][1] question, but not with AngularDart. Something like this:

    &lt;input type=&quot;text&quot; [(ngModel)]=&quot;title&quot; [focus] /&gt;
    //or 
    &lt;input type=&quot;text&quot; [(ngModel)]=&quot;title&quot; autofocus /&gt;

Does Angular2 has any build in support for this feature?

Best close question is [this one][2], but is there any shorter/easier solution, since I do not have &quot;list of input boxes&quot;. In provided link `*ngFor=&quot;#input of inputs&quot;` is used, but I only have 1 input in control template.


  [1]: https://stackoverflow.com/questions/23321469/i-have-an-angulardart-component-how-to-get-the-text-input-field-to-auto-focus-e
  [2]: https://stackoverflow.com/questions/34522306/angular-2-focus-on-newly-added-input-element?noredirect=1&amp;lq=1

Angular2+ autofocus input element

I would like to automatically route to a login page if the user is not logged in.

# app.module.ts

    import { RouterModule, Routes } from &#39;@angular/router&#39;;
    import { AppComponent } from &#39;./app.component&#39;;
    import { LoginComponent } from &#39;./login/login.component&#39;;
    import { DashBoardComponent} from &#39;./dashboard/dashboard.component&#39;;
    import { NotFoundComponent } from &#39;./not-found/not-found.component&#39;;

    const APPROUTES: Routes = [
      {path: &#39;home&#39;, component: AppComponent},
      {path: &#39;login&#39;, component: LoginComponent},
      {path: &#39;dashboard&#39;, component: DashboardComponent},
      {path: &#39;**&#39;, component: NotFoundComponent}
    ];

    @NgModule({
      declarations: [
        AppComponent,
        LoginComponent,
        DashboardComponent
        NotFoundComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MaterialModule.forRoot(),
        RouterModule.forRoot(APPROUTES)
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

If the user isn&#39;t logged in, the `LoginComponent` should load, otherwise the `DashboardComponent`.

Redirect user with router depending on logged in status

When I enable `noImplicitThis` in `tsconfig.json`, I get this error for the following code:

&gt;     &#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation.

    class Foo implements EventEmitter {
      on(name: string, fn: Function) { }
      emit(name: string) { }
    }

    const foo = new Foo();
    foo.on(&#39;error&#39;, function(err: any) {
      console.log(err);
      this.emit(&#39;end&#39;);  // error: `this` implicitly has type `any`
    });

Adding a typed `this` to the callback parameters results in the same error:

    foo.on(&#39;error&#39;, (this: Foo, err: any) =&gt; { // error: `this` implicitly has type `any`

A workaround is to replace `this` with the object:

    foo.on(&#39;error&#39;, (err: any) =&gt; {
      console.log(err);
      foo.emit(&#39;end&#39;);
    });

But what is the proper fix for this error?

---

**UPDATE:** It turns out adding a typed `this` to the callback indeed addresses the error. I was seeing the error because I was using an arrow function with a type annotation for `this`:

[![typescript playground][1]][1]

  [1]: https://i.stack.imgur.com/k4dmb.png

&#39;this&#39; implicitly has type &#39;any&#39; because it does not have a type annotation

I have an object literal such as the following (all properties are known at compile time):

    const foo = {
      &quot;hello&quot;: &quot;hola&quot;
    };

If `foo` were an interface rather than a variable, I could easily do something like 

    /** THEORETICAL ONLY - Does not compile! */
    function translate(input: keyof foo): string {
      return foo[input];
    }


However, doing so with a variable does not work, since the compiler cannot find an interface with the name `foo`.

Does Typescript support `keyof` operations on object literals whose values are known at compile time?

Is it possible to use `keyof` operator on literals instead of interfaces?

I&#39;ve just installed ubuntu docker image, when I execute &quot;ifconfig&quot; it says there&#39;s no such command, I tried apt-get install by there&#39;s no package named &quot;ifconfig&quot;(I can install some other images).

So how to do this?
Thanks.

How to install &quot;ifconfig&quot; command in my ubuntu docker image?

I am trying to convert png to jpeg using pillow. I&#39;ve tried several scrips without success. These 2 seemed to work on small png images like this one.

[![enter image description here][1]][1]

First code:

    from PIL import Image
    import os, sys
    
    im = Image.open(&quot;Ba_b_do8mag_c6_big.png&quot;)
    bg = Image.new(&quot;RGB&quot;, im.size, (255,255,255))
    bg.paste(im,im)
    bg.save(&quot;colors.jpg&quot;)

Second code: 

    image = Image.open(&#39;Ba_b_do8mag_c6_big.png&#39;)
    bg = Image.new(&#39;RGBA&#39;,image.size,(255,255,255))
    bg.paste(image,(0,0),image)
    bg.save(&quot;test.jpg&quot;, quality=95)

But if I try to convert a bigger image like this one

![][2] 

I&#39;m getting

    Traceback&#160;(most&#160;recent&#160;call&#160;last):
      File&#160;&quot;png_converter.py&quot;,&#160;line&#160;14,&#160;in&#160;&lt;module&gt;
        bg.paste(image,(0,0),image)
      File&#160;&quot;/usr/lib/python2.7/dist-packages/PIL/Image.py&quot;,&#160;line&#160;1328,&#160;in&#160;paste
        self.im.paste(im,&#160;box,&#160;mask.im) ValueError:&#160;bad&#160;transparency&#160;mask

What am i doing wrong?


  [1]: https://i.stack.imgur.com/m2GGn.jpg
  [2]: https://upload.wikimedia.org/wikipedia/commons/9/92/Ba_b_do8mag_c6_big.png

Convert png to jpeg using Pillow

I have installed React using `create-react-app`. It installed fine, but I am trying to load an image in one of my components (`Header.js`, file path: `src/components/common/Header.js`) but it&#39;s not loading. Here is my code:  

    import React from &#39;react&#39;; 
    
    export default () =&gt; {
      var logo1 = (
        &lt;img 
          //src=&quot;https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg&quot;
          src={&#39;/src/images/logo.png&#39;}
          alt=&quot;Canvas Logo&quot;
        /&gt;
      );
      return (
        &lt;div id=&quot;header-wrap&quot;&gt;
          &lt;div className=&quot;container clearfix&quot;&gt;
            &lt;div id=&quot;primary-menu-trigger&quot;&gt;
              &lt;i className=&quot;icon-reorder&quot;&gt;&lt;/i&gt;
            &lt;/div&gt;
                        
            &lt;div id=&quot;logo&quot;&gt;
              &lt;a href=&quot;/&quot; className=&quot;standard-logo&quot; data-dark-logo=&#39;/images/logo-dark.png&#39;&gt;{logo1}&lt;/a&gt;
              &lt;a href=&quot;/&quot; className=&quot;retina-logo&quot; data-dark-logo=&#39;/images/logo-dark@2x.png&#39;&gt;
                &lt;img src=&#39;/var/www/html/react-demo/src/images/logo@2x.png&#39; alt=&quot;Canvas Logo&quot; /&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    } 

If I write the image path as `src={require(&#39;./src/images/logo.png&#39;)}` in my `logo1` variable, it gives the error: 

&gt;Failed to compile.
&gt;
&gt;Error in ./src/Components/common/Header.js
&gt;
&gt;Module not found: ./src/images/logo.png in /var/www/html/wistful/src/Components/common

Please help me solve this. Let me know what I am doing wrong here. 

Load local images in React.js

I am using python 3 and latest version of openCV. I am trying to resize an image using the resize function provided but after resizing the image is very distorted. Code :

    import cv2
    file = &quot;/home/tanmay/Desktop/test_image.png&quot;
    img = cv2.imread(file , 0)
    print(img.shape)
    cv2.imshow(&#39;img&#39; , img)
    k = cv2.waitKey(0)
    if k == 27:
        cv2.destroyWindow(&#39;img&#39;)
    resize_img = cv2.resize(img  , (28 , 28))
    cv2.imshow(&#39;img&#39; , resize_img)
    x = cv2.waitKey(0)
    if x == 27:
        cv2.destroyWindow(&#39;img&#39;)
The original image is 480 x 640 (RGB therefore i passed the 0 to get it to grayscale)

Is there any way i could resize it and avoid the distortion using OpenCV or any other library perhaps? I intend to make a handwritten digit recogniser and i have trained my neural network using the MNIST data therefore i need the image to be 28x28.

Resize an image without distortion OpenCV

I currently try to make a movie out of images, but i could not find anything helpful .

Here is my code so far:

    import time
    
    from PIL import  ImageGrab
    
    x =0
    
    while True:
        try:
            x+= 1
            ImageGrab().grab().save(&#39;img{}.png&#39;.format(str(x))
        except:
            movie = #Idontknow
            for _ in range(x):
                movie.save(&quot;img{}.png&quot;.format(str(_)))
    
    movie.save()



How to make a movie out of images in python

I&#39;m trying to make a cast in my code from the body of a request in express (using body-parser middleware) to an interface, but it&#39;s not enforcing type safety.

This is my interface:

    export interface IToDoDto {
      description: string;
      status: boolean;
    };

This is the code where I&#39;m trying to do the cast:

    @Post()
    addToDo(@Response() res, @Request() req) {
      const toDo: IToDoDto = &lt;IToDoDto&gt; req.body; // &lt;&lt;&lt; cast here
      this.toDoService.addToDo(toDo);
      return res.status(HttpStatus.CREATED).end();
    }

And finally, the service method that&#39;s being called:

    public addToDo(toDo: IToDoDto): void {
      toDo.id = this.idCounter;
      this.todos.push(toDo);
      this.idCounter++;
    }

**I can pass whatever arguments, *even ones that don&#39;t come close to matching the interface definition*, and this code will work fine.** I would expect, if the cast from response body to interface is not possible, that an exception would be thrown at runtime like Java or C#.

I have read that in TypeScript casting doesn&#39;t exist, only Type Assertion, so it will only tell the compiler that an object is of type `x`, so... Am I wrong? What&#39;s the right way to enforce and ensure type safety? 

Cast object to interface in TypeScript

I have two `interfaces`, one of which extends the other. However, I would like to be able to extend the first `interface` and make all of its types optional. I don&#39;t want to have to rewrite all of the definitions of the first `interface` to be optional in my second `interface` (because what&#39;s the advantage of extending at that point?) or redefine the first `interface` because it is being used elsewhere.

What it looks like:

&lt;!-- language: lang-js --&gt;

    interface First {
      type1: string
      type2: string
    }
    
    // Seemingly pointless rewrite (why would I even need to extend?)
    interface Second extends First {
      type1?: string
      type2?: string
      type3: string
      type4: string
    }

    // What I imagine the extending should be (but doesn&#39;t work)
    interface Second extends First? {
      type3: string
      type4: string
    }

I did my research and did find [this question](https://stackoverflow.com/questions/29650402/typescript-extend-an-interface-as-not-required) that answers something very similar, but it&#39;s been a year since that question has been touched and I think my problem is not exactly the same because I want to make the _entire_ extended `interface` optional, not just a few types from it.

Is there any way to do this in Typescript, or do I just need to suck it up and make a long second `interface`?

---

## Update (to explain why I&#39;d like to have this work):
I am writing a React web app and have a component that displays an entity from my database in a way that allows the user to edit any value of that entity. I would like my React component to handle the case where the user is creating a new entity, as well as the case where the user is editing an existing entity.

To keep with my above example, let&#39;s say that my database entity&#39;s values are replicated by the **First** `interface` and the React component uses two passed props that exist in the **Second** `interface`. The React component will _always_ have the two values in the **Second**, but not necessarily have the values of the **First**.

In the case of the user creating a new entity, I&#39;d like to construct the React component with only the values of **Second**, without having to specify `null` values for everything in **First**. In the case of the user editing an existing entity, I would pass everything from **First** and **Second**.

In both cases, it would be the same UI, but constructed with a different set of values.

Typescript optionally extending interface

I have this problem which seems a bit weird to me. Take a look at this snippet of code:

    package coreinterfaces

    type FilterInterface interface {
    	Filter(s *string) bool
    }

    type FieldFilter struct {
    	Key string
    	Val string
    }
    
    func (ff *FieldFilter) Filter(s *string) bool {
    	// Some code
    }
    
    type FilterMapInterface interface {
    	AddFilter(f *FilterInterface) uuid.UUID     
    	RemoveFilter(i uuid.UUID)                   
    	GetFilterByID(i uuid.UUID) *FilterInterface
    }
    
    type FilterMap struct {
    	mutex   sync.Mutex
    	Filters map[uuid.UUID]FilterInterface
    }

    func (fp *FilterMap) AddFilter(f *FilterInterface) uuid.UUID {
        // Some code
    }

    func (fp *FilterMap) RemoveFilter(i uuid.UUID) {
    	// Some code
    }
    
    func (fp *FilterMap) GetFilterByID(i uuid.UUID) *FilterInterface {
    	// Some code
    }


On some other package, I have the following code:

    func DoFilter() {
        fieldfilter := &amp;coreinterfaces.FieldFilter{Key: &quot;app&quot;, Val: &quot;152511&quot;}
        filtermap := &amp;coreinterfaces.FilterMap{}
        _ = filtermap.AddFilter(fieldfilter) // &lt;--- Exception is raised here
    }

The run-time won&#39;t accept the line mentioned because 

&gt; &quot;cannot use fieldfilter (type *coreinterfaces.FieldFilter) as type
&gt; *coreinterfaces.FilterInterface in argument to fieldint.AddFilter:
&gt;     *coreinterfaces.FilterInterface is pointer to interface, not interface&quot;

However, when changing the code to:

    func DoBid() error {
    	bs := string(b)
    	var ifilterfield coreinterfaces.FilterInterface
    	fieldfilter := &amp;coreinterfaces.FieldFilter{Key: &quot;app&quot;, Val: &quot;152511&quot;}
    	ifilterfield = fieldfilter
    	filtermap := &amp;coreinterfaces.FilterMap{}
    	_ = filtermap.AddFilter(&amp;ifilterfield)
    }

Everything is alright and when debugging the application it really seems to include 

I&#39;m a bit confused on this topic. When looking at other blog posts and stack overflow threads discussing this exact same issue (for example - [This][1], or 
[This][2]) the first snippet which raises this exception should work, because both fieldfilter and fieldmap are initialized as pointers to interfaces, rather than value of interfaces. I haven&#39;t been able to wrap my head around what actually happens here that I need to change in order for me not to declare a FieldInterface and assign the implementation for that interface. There must be an elegant way to do this.


  [1]: https://www.goinggo.net/2014/05/methods-interfaces-and-embedded-types.html
  [2]: https://stackoverflow.com/questions/40823315/go-x-does-not-implement-y-method-has-a-pointer-receiver

&quot;&lt;type&gt; is pointer to interface, not interface&quot; confusion

I&#39;m very familiar with the concepts of interfaces and abstract classes, but not super familiar with the concepts of _mixins_. 

Right now, in Dart, every class `A` defines an implicit interface, which can be implemented by another class `B` by using the `implements` keyword. There&#39;s no explicit way of declaring interfaces as, for example, in Java, where an interface contains only unimplemented methods (and eventually static variables). In Dart, since interfaces are defined by classes, the methods of the interface `A` may actually already be implemented, but the class that implements `B` still needs to override these implementations.

We can see that situation from the following piece of code:

    class A {
      void m() {
        print(&quot;method m&quot;);
      }
    }
    
    // LINTER ERROR: Missing concrete implementation of A.m
    // Try implementing missing method or make B abstract.
    class B implements A {
    }

In Dart, a mixin is also defined via ordinary class declarations...

&gt; ... In principle, every class defines a mixin that can be extracted from it. However, in this proposal, a mixin may only be extracted from a class that has no declared constructors. This restriction avoids complications that arise due to the need to pass constructor parameters up the inheritance chain.

A mixin is basically a class that can define both unimplemented or implemented methods. It&#39;s a way to add methods to another class without needing to logically use inheritance. In Dart, a mixin is applied to a super class, that is extended via &quot;normal&quot; inheritance, like in the following example:

    class A {
      void m() {
        print(&quot;method m&quot;);
      }
    }

    class MyMixin {
      void f(){
        print(&quot;method f&quot;);
      }
    }

    class B extends A with MyMixin {
    }

In this case, we should note that `B` does not have to implement any further methods both of `A` and `MyMixin`.

There&#39;s a clear distinction between _applying a mixin_ to a class and inheriting from a class, at least in a language that supports only single-parent inheritance, since, in that case, we could apply many mixins to a class, but a class could just inherit from another class.

There&#39;s also a clear distinction between implementing an interface and inheriting from a class. The class that implements an interface needs to mandatorily implement all methods defined by the interface.

So, in summary, the concept of implementing an interface is more about establishing a contract with the class that implements the interface, and the concept of mixins (as the name suggests) is more about reusing code (without recurring to an inheritance hierarchy).

When to use mixins and when to use interfaces in Dart? Are there some rules of thumb for at least special recurrent patterns when designing software where it would be better to define a mixin and applying it to a super class rather than making our class implement an interface? I would appreciate concrete examples of design decisions in a context where both interfaces and mixins could be used, but one is used over the other (for some reason).

When to use mixins and when to use interfaces in Dart?

I need to use angular material table without model, because I don&#39;t know what will come from service. 

So I am initializing my `MatTableDataSource` and `displayedColumns` dynamically in component like that :

**TableComponent :**

&lt;!-- language: lang-ts --&gt;

    ngOnInit() {

    this.vzfPuanTablo = [] //TABLE DATASOURCE
    
    //GET SOMETHING FROM SERVICE 
    this.listecidenKisi = this.listeciServis.listecidenKisi;
    this.listecidenVazife = this.listeciServis.listecidenVazife;

    //FILL TABLE DATASOURCE 
    var obj = {};
    for (let i in this.listecidenKisi ){
        for( let v of this.listecidenVazife[i].vazifeSonuclar){
            obj[v.name] = v.value;
        }
        this.vzfPuanTablo.push(obj);
        obj={};
    }

    //CREATE DISPLAYED COLUMNS DYNAMICALLY
    this.displayedColumns = [];
    for( let v in this.vzfPuanTablo[0]){
        this.displayedColumns.push(v);
    }

    //INITIALIZE MatTableDataSource
    this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
    }

---------------------------
The most important part of code is here :

&gt; ```lang-ts
&gt;for( let v in this.vzfPuanTablo[0]) {
&gt;    this.displayedColumns.push(v);
&gt;}
&gt;```

I am creating `displayedColumns` here dynamically, it means; even I don&#39;t know what will come from service, I can show it in table.

For example `displayedColumns` can be like that: 

 - [&quot;one&quot;, &quot;two&quot; , &quot;three&quot; , &quot;four&quot; , &quot;five&quot; ]

or 

 - [&quot;stack&quot;,&quot;overflow&quot;,&quot;help&quot;,&quot;me]

But it is not problem because I can handle it.

---------------------------
But when I want to show it in HTML, I can&#39;t show properly because of 
`matCellDef` thing: 

**TableHtml :**

&lt;!-- language: lang-xml --&gt;

        &lt;mat-table #table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;

            &lt;ng-container *ngFor=&quot;let disCol of displayedColumns; let colIndex = index&quot; matColumnDef=&quot;{{disCol}}&quot;&gt;
                &lt;mat-header-cell *matHeaderCellDef&gt;{{disCol}}&lt;/mat-header-cell&gt;
                &lt;mat-cell *matCellDef=&quot;let element &quot;&gt; {{element.disCol}}
                &lt;/mat-cell&gt;
            &lt;/ng-container&gt;

            &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
            &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
        &lt;/mat-table&gt;


My problem is here:
&gt;```lang-xml
&gt; &lt;mat-cell *matCellDef=&quot;let element &quot;&gt; {{element.disCol}} &lt; / mat-cell&gt;
&gt;```


In fact, I want to display `element.&quot;disCol&#39;s value&quot;` in the cell, but I don&#39;t know how can I do that.

Otherwise, everything is ok except this `element.&quot;disCol&#39;s value&quot;` thing.

---------------------------

When I use `{{element.disCol}}` to display `value of element that has disCols&#39;s value` , all cells are empty like that:
 
[![enter image description here][1]][1]

Other example that using `{{element}}` only:

[![enter image description here][2]][2]

---------------------------
**Also as you can see:** 

 1. Table datasource is changing dynamically. It means I can&#39;t use `{{element.ColumnName}}` easily, because I don&#39;t know even what is it.

     - First Example&#39;s displayedColumns = [&#39;Vazife&#39;, &#39;AdSoyad&#39;, &#39;Kirmizi&#39;, &#39;Mavi&#39;, &#39;Yesil&#39;, &#39;Sari&#39;];
     - Second Example&#39;s displayedColumns = [&#39;Muhasebe&#39;, &#39;Ders&#39;, &#39;Egitim&#39;, &#39;Harici&#39;];

 2. `matHeaderCellDef` is correct , because it is using {{disCol}} directly.

*But I need to read disCol&#39;s value, and display `element.(disCol&#39;s value)` in the cell.*

**How can I do that ?**

  [1]: https://i.stack.imgur.com/XzB68.png
  [2]: https://i.stack.imgur.com/Upb14.png

Content Type	Original Author	Original Content on Stackoverflow
Question	Seenu S	View Question on Stackoverflow
Solution 1 - Typescript	Misaz	View Answer on Stackoverflow

In TypeScript, What is the type of Image?

Typescript Problem Overview

Typescript Solutions

Solution 1 - Typescript

Using media breakpoints in Bootstrap 4-alpha

How do I set initial state in Vuex 2?

Attributions