Click here to Skip to main content
15,904,416 members
Home / Discussions / Web Development
   

Web Development

 
Questionpassword hasher Pin
Member 1347817421-Oct-17 20:38
Member 1347817421-Oct-17 20:38 
QuestionRe: password hasher Pin
Richard MacCutchan23-Oct-17 2:48
mveRichard MacCutchan23-Oct-17 2:48 
QuestionWhat do y'all use for prototyping Pin
#realJSOP19-Oct-17 5:52
professional#realJSOP19-Oct-17 5:52 
QuestionIt's probably just me... Pin
#realJSOP18-Oct-17 2:39
professional#realJSOP18-Oct-17 2:39 
AnswerRe: It's probably just me... Pin
Nathan Minier23-Oct-17 1:25
professionalNathan Minier23-Oct-17 1:25 
GeneralRe: It's probably just me... Pin
#realJSOP23-Oct-17 4:45
professional#realJSOP23-Oct-17 4:45 
GeneralRe: It's probably just me... Pin
Nathan Minier23-Oct-17 6:13
professionalNathan Minier23-Oct-17 6:13 
QuestionRelated to Table in angular 4 material Pin
Munjal Pandya6-Oct-17 22:18
Munjal Pandya6-Oct-17 22:18 
Hi Yaseer,

I have started the implementation of databinding using table given here.
In the example on this site, they have taken fix array to bind the data. As per your example of users database, I have added another page and typescript whose code is mentioned below.

Typescript code:

<pre>import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../Service/user.service';
import { IUser } from '../Model/user';
import { DBOperation } from '../Shared/enum';
import { Observable } from 'rxjs/Rx';
import { Global } from '../Shared/global';
import { ManageUser } from './manageuser.component';
import { MdDialog, MdDialogRef } from '@angular/material';
import { UserFilterPipe } from '../filter/user.pipe';
import { DataSource } from "@angular/cdk/collections";
import 'rxjs/add/observable/of';

@Component({
    templateUrl: 'app/Components/userlist.component.html'
})

export class UserListComponent implements OnInit {

    users: IUser[];
    user: IUser;
    dataSource: userDataSource;
    displayedColumns = ['FirstName', 'LastName'];

    constructor(private _userService: UserService) { }

    ngOnInit(): void {
        this.LoadUsers();
        this.dataSource = new userDataSource(this.users);
    }
    LoadUsers(): void {
        this._userService.get(Global.BASE_USER_ENDPOINT)
            .subscribe(users => { this.users = users }
            );

    }
}

export class userDataSource extends DataSource<any>{

    constructor(private _users: IUser[]) {
        super();
    }

    connect(): Observable<IUser[]> {
        debugger;
        return Observable.of(this._users);
    }

    disconnect() { }
}


My HTML:

HTML
<pre><div class='panel panel-primary'>
    <div class='panel-heading'>
        User List using Table
    </div>
    <div class='panel-body'>
        <md-table #table [dataSource]="dataSource">
            <ng-container mdColumnDef="FirstName">
                <md-header-cell *mdHeaderCellDef> First Name </md-header-cell>
                <md-cell *mdCellDef="let element"> {{element.FirstName}} </md-cell>
            </ng-container>


            <ng-container mdColumnDef="LastName">
                <md-header-cell *mdHeaderCellDef> Last Name </md-header-cell>
                <md-cell *mdCellDef="let element"> {{element.LastName}} </md-cell>
            </ng-container>

            <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
            <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
        </md-table>
    </div>
</div>


The issue is that I am not getting any scripting error but data is also not binding. Weird thing is that when I debug the typescript in browser, the data gets bind sometimes while debugging.

It will be good if you can throw some light on this.

Please find the steps to upgrade to material
2.0.0-beta.10
dependency below just for your reference.

1. "@angular/material": "2.0.0-beta.7" --> No Change
2. "@angular/material": "2.0.0-beta.8"

2.1 Include "@angular/cdk": "2.0.0-beta.8" in devDependencies
2.2 Change "rxjs": "5.0.1" to "rxjs": "5.0.3" in dependencies
2.3 map bundle '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js' in systemjs.config.js

3. "@angular/material": "2.0.0-beta.10"

3.1 Change "@angular/cdk": "2.0.0-beta.8" to "@angular/cdk": "2.0.0-beta.10"
3.2 map below bundles in systemjs.config.js

	'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
	'@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
	'@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
	'@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
	'@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
	'@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
	'@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
	'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
	'@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
	'@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
	'@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
	'@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',

3.3 Change <button mdSuffix [mdDatepickerToggle]="picker"></button> to <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
3.4 Import below dependencies if using Autocomplete feature
	import 'rxjs/add/operator/startWith';
	import 'rxjs/add/operator/map';

SuggestionRe: Related to Table in angular 4 material Pin
Richard Deeming9-Oct-17 8:55
mveRichard Deeming9-Oct-17 8:55 
GeneralRe: Related to Table in angular 4 material Pin
Munjal Pandya9-Oct-17 17:25
Munjal Pandya9-Oct-17 17:25 
QuestionMVC Edit form with dynamic dropdown list Pin
desanti23-Sep-17 8:45
desanti23-Sep-17 8:45 
AnswerRe: MVC Edit form with dynamic dropdown list Pin
Richard Deeming25-Sep-17 2:26
mveRichard Deeming25-Sep-17 2:26 
QuestionMVC entity framework web page - How to store logged user in a global variable Pin
desanti22-Sep-17 4:12
desanti22-Sep-17 4:12 
AnswerRe: MVC entity framework web page - How to store logged user in a global variable Pin
Richard Deeming22-Sep-17 4:51
mveRichard Deeming22-Sep-17 4:51 
GeneralRe: MVC entity framework web page - How to store logged user in a global variable Pin
desanti22-Sep-17 5:55
desanti22-Sep-17 5:55 
GeneralRe: MVC entity framework web page - How to store logged user in a global variable Pin
Richard Deeming22-Sep-17 6:05
mveRichard Deeming22-Sep-17 6:05 
QuestionDigital Signatures Pin
Nathan Minier19-Sep-17 7:08
professionalNathan Minier19-Sep-17 7:08 
QuestionLogin form php,mysql,ajax Pin
Dalee1716-Sep-17 14:55
Dalee1716-Sep-17 14:55 
AnswerRe: Login form php,mysql,ajax Pin
W Balboos, GHB11-Oct-17 5:46
W Balboos, GHB11-Oct-17 5:46 
Questionhtml warning Pin
dcof30-Aug-17 12:10
dcof30-Aug-17 12:10 
AnswerRe: html warning Pin
W Balboos, GHB20-Sep-17 2:18
W Balboos, GHB20-Sep-17 2:18 
AnswerRe: html warning Pin
Member 1349103928-Oct-17 12:56
Member 1349103928-Oct-17 12:56 
QuestionScroll Bar in Popup Window Pin
shahbaz shaikh27-Aug-17 3:37
shahbaz shaikh27-Aug-17 3:37 
QuestionHow do I configure dropzone.js? Pin
Member 1307448726-Aug-17 13:39
Member 1307448726-Aug-17 13:39 
Rant[REPOST]: How do I configure dropzone.js? Pin
Richard Deeming29-Aug-17 2:43
mveRichard Deeming29-Aug-17 2:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.