refactor (use material2 builds) #6

tobiasschweizer · 2018-03-28T15:09:12Z

I want to use material2 builds to implement a calendar switcher (custom header).

I put the github repo in the package.json. This creates conflicts with other dependencies. I tried to mark all other third party dependencies with a * to get the latest version.

During build I get:

ERROR in node_modules/@angular/material/input/typings/autosize.d.ts(8,37): error TS2307: Cannot find module '@angular/cdk/text-field'.
node_modules/@angular/material/input/typings/input.d.ts(7,33): error TS2307: Cannot find module '@angular/cdk/text-field'.
node_modules/@angular/material/stepper/typings/stepper.d.ts(29,5): error TS2416: Property '_stepHeader' in type 'MatStepper' is not assignable to the same property in base type 'CdkStepper'.
  Type 'QueryList<MatStepHeader>' is not assignable to type 'QueryList<ElementRef>'.
    Type 'MatStepHeader' is not assignable to type 'ElementRef'.
      Property 'nativeElement' is missing in type 'MatStepHeader'.
node_modules/@angular/material/tree/typings/data-source/flat-data-source.d.ts(9,46): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/node.d.ts(9,73): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/node.d.ts(17,22): error TS2420: Class 'MatTreeNode<T>' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MatTreeNode<T>'.
node_modules/@angular/material/tree/typings/node.d.ts(17,22): error TS2420: Class 'MatTreeNode<T>' incorrectly implements interface 'HasTabIndex'.
  Property 'tabIndex' is missing in type 'MatTreeNode<T>'.
node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class 'MatNestedTreeNode<T>' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MatNestedTreeNode<T>'.
node_modules/@angular/material/tree/typings/node.d.ts(32,22): error TS2420: Class 'MatNestedTreeNode<T>' incorrectly implements interface 'HasTabIndex'.
  Property 'tabIndex' is missing in type 'MatNestedTreeNode<T>'.
node_modules/@angular/material/tree/typings/outlet.d.ts(8,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/padding.d.ts(8,36): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/toggle.d.ts(1,35): error TS2307: Cannot find module '@angular/cdk/tree'.
node_modules/@angular/material/tree/typings/tree.d.ts(1,25): error TS2307: Cannot find module '@angular/cdk/tree'.
src/app/modules/jdnconvertiblecalendardateadapter/adapter/index.ts(2,57): error TS2305: Module '"/Users/.../gitreps/JDNConvertibleCalendarDateAdapter/node_modules/@angular/material/material"' has no exported member 'MAT_DATE_LOCALE_PROVIDER'.

@mmalerba Could you help me here?

mmalerba · 2018-03-28T15:18:58Z

package.json

-    "core-js": "^2.5.1",
-    "hammerjs": "^2.0.8",
+    "@angular/animations": "*",
+    "@angular/cdk": "*",


Material & CDK 6.0.0-beta.5 is out now which I think should contain your change. You probably want to use that instead of the *-builds repos. For the rest of the Angular stuff you can use 6.0.0-rc.0.

@mmalerba Thanks!

Now I get

ERROR in node_modules/@angular/common/src/location/location.d.ts(1,10): error TS2305: Module '"/Users/.../gitreps/JDNConvertibleCalendarDateAdapter/node_modules/rxjs/Rx"' has no exported member 'SubscriptionLike'. src/app/modules/jdnconvertiblecalendardateadapter/adapter/index.ts(2,57): error TS2305: Module '"/Users/.../gitreps/JDNConvertibleCalendarDateAdapter/node_modules/@angular/material/material"' has no exported member 'MAT_DATE_LOCALE_PROVIDER'.

For error 1 I tried the solution mentioned here https://stackoverflow.com/questions/49446163/typescript-how-to-resolve-rxjs-rx-has-no-exported-member-subscriptionlike but then at runtime it did not work.

For error 2: Was MAT_DATE_LOCALE_PROVIDER removed from angular/material?

We have rxjs 6.0.0-beta.1 in our package.json, you might need to update that too. Yes, we removed MAT_DATE_LOCALE_PROVIDER in favor of the new scoped injectables (see angular/components#10507). Theoretically this means you can just remove the reference to it

Do I need to update the @types libs?

I get these errors at build time

ERROR in node_modules/@angular/material/table/typings/table-data-source.d.ts(130,5): error TS2416: Property 'connect' in type 'MatTableDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'. Type '() => BehaviorSubject<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'. Type 'BehaviorSubject<T[]>' is not assignable to type 'Observable<T[]>'. Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'. node_modules/@angular/material/tree/typings/data-source/flat-data-source.d.ts(80,5): error TS2416: Property 'connect' in type 'MatTreeFlatDataSource<T, F>' is not assignable to the same property in base type 'DataSource<F>'. Type '(collectionViewer: CollectionViewer) => Observable<F[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<F[]>'. Two different types with this name exist, but they are unrelated. Type 'Observable<F[]>' is not assignable to type 'Observable<F[]>'. Two different types with this name exist, but they are unrelated. Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'. node_modules/@angular/material/tree/typings/data-source/nested-data-source.d.ts(23,5): error TS2416: Property 'connect' in type 'MatTreeNestedDataSource<T>' is not assignable to the same property in base type 'DataSource<T>'. Type '(collectionViewer: CollectionViewer) => Observable<T[]>' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<T[]>'. Two different types with this name exist, but they are unrelated. Type 'Observable<T[]>' is not assignable to type 'Observable<T[]>'. Two different types with this name exist, but they are unrelated.

Hmm I'm not sure why that's happening. Here's what our own package.json looked like as of the 6.0.0-beta.5 release: https://github.com/angular/material2/blob/0e37d6cdd73b49923d06add54e0d34bd9d256eda/package.json

Make sure your dependencies are at a high enough version, delete your package-lock.json and node_modules/ and then run npm i. Hopefully that should make it work. (There may be breakages in your code, since these are new major versions, but it should at least get rid of the errors coming from the Angular Material code).

Ok, it works now:-) Thanks!

…rsion

…tive calendar format

tobiasschweizer · 2018-04-03T14:49:36Z

@mmalerba Now this implementation of DateAdapter keeps track of the currently selected calendar format (see 03445c9). Now it should be possible to switch back and forth between Gregorian and Julian dates and manipulate them as you wish.

Once angular/components#10633 is merged, I can use the default header.

tobiasschweizer · 2018-04-13T09:52:42Z

@mmalerba Thanks, I will try with npm i @angular/cdk@next @angular/material@next :-) to use the default calendar header with the calendar switch prepended. I will try find a solution for styling problems (it gets a little out of bounds with the calendar switch).

tobiasschweizer · 2018-04-13T15:06:49Z

src/app/app.component.ts

+        <mat-option *ngFor="let cal of supportedCalendarFormats" [value]="cal">{{cal}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div class="custom-header">


@mmalerba If I try to use <mat-calendar-header></mat-calendar-header> instead I get

compiler.js:215 Uncaught Error: Template parse errors: No provider for MatCalendar (" <button mat-icon-button (click)="nextClicked('year')">>></button> </div> [ERROR ->]<mat-calendar-header></mat-calendar-header> "): ng:///AppModule/HeaderComponent.html@13:4 at syntaxError (compiler.js:215) at TemplateParser.parse (compiler.js:14692) at JitCompiler._parseTemplate (compiler.js:22632) at JitCompiler._compileTemplate (compiler.js:22619) at eval (compiler.js:22562) at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:22562) at eval (compiler.js:22472) at Object.then (compiler.js:206) at JitCompiler._compileModuleAndComponents (compiler.js:22471)

However, if I use <mat-year-view></mat-year-view>it works just fine.

I am using 6.0.0-rc.3.

Is there still something missing to export MatCalendarHeader? Or is the export you made not included yet in 6.0.0-rc.3?

WebStorm complains about mat-calendar-header:

/** Default header for MatCalendar */ @Component({ moduleId: module.id, selector: 'mat-calendar-header', templateUrl: 'calendar-header.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, })

/** * An internal component used to display a single year in the datepicker. * @docs-private */ @Component({ moduleId: module.id, selector: 'mat-year-view', templateUrl: 'year-view.html', exportAs: 'matYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush })

There is no exportAs for MatCalendarHeader. Is that needed to use the selector outside of material?

mmalerba · 2018-04-13T17:53:17Z

It should definitely be exported now. The error you're getting doesn't look like an export problem, it looks like the calendar header is failing to inject the calendar. This is probably because of the `@Host()`. This is causing it to only look at the direct parent component, so nesting it inside another component is not working. Do you want to send a PR removing the `@Host()` and adding a test case to verify? You can also add an `exportAs` while you're at it, it's not critical, it's just so people can do `#header="matCalendarHeader"`, but would be good to add.

…

-Miles

On Fri, Apr 13, 2018 at 8:15 AM Tobias Schweizer ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/app/app.component.ts <#6 (comment)> : > @@ -23,3 +27,87 @@ export class AppComponent { } } + ***@***.***({ + selector: 'app-calendar-header', + template: ` + <mat-form-field> + <mat-select placeholder="Calendar Format" [formControl]="form.controls['calendar']"> + <mat-option *ngFor="let cal of supportedCalendarFormats" [value]="cal">{{cal}}</mat-option> + </mat-select> + </mat-form-field> + <div class="custom-header"> /** Default header for MatCalendar */ @component({ moduleId: module.id, selector: 'mat-calendar-header', templateUrl: 'calendar-header.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) /** * An internal component used to display a single year in the datepicker. * @docs-private */ @component({ moduleId: module.id, selector: 'mat-year-view', templateUrl: 'year-view.html', exportAs: 'matYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) There is no exportAs for MatCalendarHeader. Is that needed to use the selector outside of material? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOG6SFC9Ywi6KyilNPfUV6PJEmetocAoks5toMEHgaJpZM4S-1Jj> .

mmalerba · 2018-04-13T17:54:12Z

Whoops forgot to link to the `@Host` I was talking about, this guy is the problem I think: https://github.com/angular/material2/blob/master/src/lib/datepicker/calendar.ts#L50

…

On Fri, Apr 13, 2018 at 10:53 AM Miles Malerba ***@***.***> wrote: It should definitely be exported now. The error you're getting doesn't look like an export problem, it looks like the calendar header is failing to inject the calendar. This is probably because of the ***@***.***()`. This is causing it to only look at the direct parent component, so nesting it inside another component is not working. Do you want to send a PR removing the ***@***.***()` and adding a test case to verify? You can also add an `exportAs` while you're at it, it's not critical, it's just so people can do `#header="matCalendarHeader"`, but would be good to add. -Miles On Fri, Apr 13, 2018 at 8:15 AM Tobias Schweizer ***@***.***> wrote: > ***@***.**** commented on this pull request. > ------------------------------ > > In src/app/app.component.ts > <#6 (comment)> > : > > > @@ -23,3 +27,87 @@ export class AppComponent { > > } > } > + > ***@***.***({ > + selector: 'app-calendar-header', > + template: ` > + <mat-form-field> > + <mat-select placeholder="Calendar Format" [formControl]="form.controls['calendar']"> > + <mat-option *ngFor="let cal of supportedCalendarFormats" [value]="cal">{{cal}}</mat-option> > + </mat-select> > + </mat-form-field> > + <div class="custom-header"> > > /** Default header for MatCalendar */ > @component({ > moduleId: module.id, > selector: 'mat-calendar-header', > templateUrl: 'calendar-header.html', > encapsulation: ViewEncapsulation.None, > changeDetection: ChangeDetectionStrategy.OnPush, > }) > > /** > * An internal component used to display a single year in the datepicker. > * @docs-private > */ > @component({ > moduleId: module.id, > selector: 'mat-year-view', > templateUrl: 'year-view.html', > exportAs: 'matYearView', > encapsulation: ViewEncapsulation.None, > changeDetection: ChangeDetectionStrategy.OnPush > }) > > There is no exportAs for MatCalendarHeader. Is that needed to use the > selector outside of material? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#6 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AOG6SFC9Ywi6KyilNPfUV6PJEmetocAoks5toMEHgaJpZM4S-1Jj> > . >

tobiasschweizer · 2018-04-13T23:29:09Z

@mmalerba Ok, I can make a PR for that (angular/components#10856). The CLA is not a problem anymore :-)

tobiasschweizer · 2018-04-19T12:42:08Z

src/app/app.component.ts

+
+      this._calendar._dateSelected(convertedDate);
+
+      this._calendar.ngAfterContentInit();


@mmalerba

After the change of the calendar format, the month view is not updated (today's date is still in the old calendar format and also the new calendar date could be in the previous or next month).

See https://www.dropbox.com/s/mdkp6b5bv76uwsd/month_view.mov?dl=0

If the calendar is toggled, it works. Could the event be triggered from here?

view can be updated using _goToDateInView, see b1891b3

I assume that these methods are not meant to be exposed to the outside. Should we add them to the public api?

Did you try injecting the ChangeDetectorRef and calling markForCheck()?

I can inject it but today's date does not get updated (the circle stays with the old date).

However, if I change the month with the arrow controls (previousClicked, nextClicked), it gets updated.

Ah I see, it's because the views only check today's date on init. In that case I think what you're doing should be ok (calling ngAfterContentInit), even though it looks kind of weird at a glance. I would just put a comment explaining why you're doing it.

Ok, but probably we will need another solution once JDNConvertibleCalendar supports additional calendar formats that would require a reinit because the amount of months could be different and the names would be different too (e.g., if you convert from Gregorian to Hebrew calendar).

Btw: I will be away for the next two weeks having some time off :-)
Thanks for all your helpful advice:-)

tobiasschweizer · 2018-05-14T14:06:35Z

src/app/app.component.ts

+
+      // update the calendar UI after date format conversion
+      // TODO: today's date is not reset correctly
+      this._calendar.ngAfterContentInit();


@mmalerba today's date is still not updated correctly (circle in UI). I would be glad for any suggestions.

see #6 (comment)

I think you need to call init on the various view themselves, rather than the calendar:

let view = this._calendar.currentView == 'month' ? this._calendar.monthView : (this._calendar.currentView == 'year ? this._calendar.yearView : this._calendar.multiYearView); view.ngAfterContentInit();

If you want to send a PR adding a updateTodaysDate() method to the datepicker, I would be ok with that. This solution seems kind of messy.

Thanks, I will try that!

tobiasschweizer · 2018-05-14T14:08:20Z

src/app/app.component.ts

+    <mat-select placeholder="Calendar Format" [formControl]="form.controls['calendar']">
+      <mat-option *ngFor="let cal of supportedCalendarFormats" [value]="cal">{{cal}}</mat-option>
+    </mat-select>
+    <mat-calendar-header></mat-calendar-header>


@mmalerba This works now :-) (angular/components#10856)

@mmalerba done in 00231b6

If you want to send a PR adding a updateTodaysDate() method to the datepicker, I would be ok with that. This solution seems kind of messy.

I agree. What about a general method to do a clean reinit? Once we add more calendar formats, the names of the months etc. may be completely different, so we need to reinit the whole thing.

tobiasschweizer · 2018-06-14T16:33:49Z

@mmalerba I would like to resolve #5 before merging this. The problem is that we did not use the angular compiler so far, and tsc removed the decorators.

tobiasschweizer · 2018-06-15T10:02:42Z

this PR is replaced by #7

refactor (use material2 builds)

92b7660

tobiasschweizer self-assigned this Mar 28, 2018

tobiasschweizer added enhancement question labels Mar 28, 2018

mmalerba reviewed Mar 28, 2018

View reviewed changes

Tobias Schweizer added 6 commits March 28, 2018 17:42

refactor (package.json)

35d5695

refactor (package.json)

69dd618

refactor (package.json)

177d206

feature (add custom header with calendar switcher)

61cdd17

fix (trigger event): trigger date changed event when after date conve…

b6242ad

…rsion

feature (switch between calendar formats): keep track of currently ac…

03445c9

…tive calendar format

Tobias Schweizer added 4 commits April 3, 2018 17:30

test (travis config)

ad7e358

test (travis)

467fa2f

test (travis)

e25939a

refactor (add label to format switch)

e222237

refactor (package.json)

2f0d34a

tobiasschweizer commented Apr 13, 2018

View reviewed changes

feature (get today's date): get today's date in the active calendar

f871ac2

tobiasschweizer commented Apr 19, 2018

View reviewed changes

Tobias Schweizer added 3 commits April 19, 2018 14:51

fix (update view): update view after date conversion

b1891b3

feature (packages.json): version update

9acf30b

refactor (update UI): aupdate UI after date format conversion

75db7a6

tobiasschweizer commented May 14, 2018

View reviewed changes

fix (update view): trigger events after calendar format conversion

00231b6

tobiasschweizer closed this Jun 15, 2018

tobiasschweizer deleted the wip/calendar_header branch June 15, 2018 12:29

tobiasschweizer mentioned this pull request Jun 18, 2018

Add public method to MatCalendar to update today's date angular/components#11821

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor (use material2 builds) #6

refactor (use material2 builds) #6

tobiasschweizer commented Mar 28, 2018 •

edited

Loading

mmalerba Mar 28, 2018

tobiasschweizer Mar 28, 2018

mmalerba Mar 28, 2018

tobiasschweizer Mar 28, 2018

mmalerba Mar 28, 2018

tobiasschweizer Mar 29, 2018

tobiasschweizer commented Apr 3, 2018 •

edited

Loading

tobiasschweizer commented Apr 13, 2018

tobiasschweizer Apr 13, 2018

tobiasschweizer Apr 13, 2018

tobiasschweizer Apr 13, 2018

mmalerba commented Apr 13, 2018 via email

mmalerba commented Apr 13, 2018 via email

tobiasschweizer commented Apr 13, 2018 •

edited

Loading

tobiasschweizer Apr 19, 2018

tobiasschweizer Apr 19, 2018

tobiasschweizer Apr 19, 2018

mmalerba Apr 19, 2018

tobiasschweizer Apr 19, 2018

mmalerba Apr 19, 2018

tobiasschweizer Apr 19, 2018

tobiasschweizer May 14, 2018

tobiasschweizer May 14, 2018

mmalerba May 25, 2018 •

edited

Loading

tobiasschweizer May 25, 2018

tobiasschweizer May 14, 2018

tobiasschweizer May 28, 2018

tobiasschweizer commented Jun 14, 2018

tobiasschweizer commented Jun 15, 2018


		this._calendar._dateSelected(convertedDate);

		this._calendar.ngAfterContentInit();

refactor (use material2 builds) #6

refactor (use material2 builds) #6

Conversation

tobiasschweizer commented Mar 28, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer commented Apr 3, 2018 • edited Loading

tobiasschweizer commented Apr 13, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba commented Apr 13, 2018 via email

mmalerba commented Apr 13, 2018 via email

tobiasschweizer commented Apr 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmalerba May 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer commented Jun 14, 2018

tobiasschweizer commented Jun 15, 2018

tobiasschweizer commented Mar 28, 2018 •

edited

Loading

tobiasschweizer commented Apr 3, 2018 •

edited

Loading

tobiasschweizer commented Apr 13, 2018 •

edited

Loading

mmalerba May 25, 2018 •

edited

Loading