Active mdc-tab #349

BrahimLaarif · 2017-11-02T15:16:12Z

Hi,

I'm actually working with tabs and notice that you can't set active to mdc-tab based on route url.
Here a example :

<mdc-tab routerLink="/sales/create" [active]="router.isActive('/sales/create')">
      Saisie vente
</mdc-tab>

With this approach, the mdc-tab get the .mdc-tab--active class but the tab line stay in the initial position.

The text was updated successfully, but these errors were encountered:

trimox · 2017-11-05T18:44:54Z

Hey @ESKI Could you review my examples below and see if they work for you? I'll hold off on code change until I hear back.

<mdc-tab routerLink="/sales/create" routerLinkActive #rla="routerLinkActive" 
  [active]="rla.isActive">
  Saisie vente
</mdc-tab>

Also, here's an example with an *ngFor

<mdc-tab-bar>
  <mdc-tab *ngFor="let tabLink of tabLinks" [routerLink]="[{outlets: {taboutlet: tabLink.link}}]"
    routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{tabLink.label}}</mdc-tab>
</mdc-tab-bar>

BrahimLaarif · 2017-11-07T00:17:54Z

It's the same thing as before.
My example below works if you have route with children.

trimox · 2017-11-07T11:31:29Z

Kk. I'm testing some changes that can handle tab routing with url's.

Closes #349 Closes #147

trimox · 2017-11-13T01:27:36Z

@ESKI I got this working in PR #369 👍

Finishing up a couple PR minor to-do items, and I'll merge.

- [x] Add `disabled` tab - [x] Fix `[active]` property changes not propagating #349 - [x] Fix `mdc-tab-bar-scroller__indicator` misplaced issue #281 - [x] Remove `mdc-tab-bar-scroll-button` directive #### mdc-tab * Add `disabled: boolean` property to `mdc-tab` * Refactor `active` property * Add `changeDetection: ChangeDetectionStrategy.OnPush` * Add `preserveWhitespaces: false` * Add `getComputedWidth(): number`; return the computed width for tab. * Add `getComputedLeft(): number`; return the computed left offset for tab. * Add `isActive()` return true if tab is active. * Add `setActive(boolean)`; set tab active property to value passed. * Add `getPreventDefaultOnClick(): boolean`; return true if the tab prevents the default click action. * Add `setPreventDefaultOnClick(boolean)`; sets tabs `preventDefaultOnClick` property to the value passed. * Add `measureSelf()`; sets computedWidth and computedLeft for a tab. #### mdc-tab-bar * Add `getComputedWidth(): number` * Add `layout(): void` * Add `changeDetection: ChangeDetectionStrategy.OnPush` * Add `preserveWhitespaces: false` * Add `getActiveTabIndex(): number` * Add `switchToTabAtIndex(index: number, shouldNotify: boolean = true)` * Add `MdcTabBarIndicator` directive * Add `setPreventDefaultOnClickForTabAtIndex(index: number, preventDefaultOnClick: boolean)` * Add `isDefaultPreventedOnClickForTabAtIndex(index: number): boolean` #### mdc-tab-bar-scroller * Add `layout()` * Add `changeDetection: ChangeDetectionStrategy.OnPush` * Add `preserveWhitespaces: false` * Add `scrollBack(event?: Event)` * Add `scrollForward(event?: Event)` * Remove `mdc-tab-bar-scroll-button` directive BREAKING CHANGE: Removed `mdc-tab-bar-scroll-button` directive. Use `mdc-icon` instead. Please update your code accordingly. Example: ```html <mdc-tab-bar-scroll-back> <mdc-icon>navigate_before</mdc-icon> </mdc-tab-bar-scroll-back> ``` Closes #349 Closes #147 Closes #281

phutaneVinayak · 2019-02-25T07:38:30Z

Hey @ESKI Could you review my examples below and see if they work for you? I'll hold off on code change until I hear back.
<mdc-tab routerLink="/sales/create" routerLinkActive #rla="routerLinkActive" 
  [active]="rla.isActive">
  Saisie vente
</mdc-tab>
Also, here's an example with an *ngFor
<mdc-tab-bar>
  <mdc-tab *ngFor="let tabLink of tabLinks" [routerLink]="[{outlets: {taboutlet: tabLink.link}}]"
    routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{tabLink.label}}</mdc-tab>
</mdc-tab-bar>

hi,
i implemented above code, but i am getting Can't bind to 'active' since it isn't a known property of 'mdc-tab'.

i am on Angular 7

Error stack :-

core.js:15714 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'active' since it isn't a known property of 'mdc-tab'.

If 'mdc-tab' is an Angular component and it has 'active' input, then verify that it is part of this module.
If 'mdc-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
routerLinkActive
#rla="routerLinkActive"
[ERROR ->][(active)]="rla.isActive"
>

"): ng:///TripsModule/TripDetailComponent.html@12:10
Error: Template parse errors:
Can't bind to 'active' since it isn't a known property of 'mdc-tab'.
If 'mdc-tab' is an Angular component and it has 'active' input, then verify that it is part of this module.
If 'mdc-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
routerLinkActive
#rla="routerLinkActive"
[ERROR ->][(active)]="rla.isActive"
>

"): ng:///TripsModule/TripDetailComponent.html@12:10
at syntaxError (compiler.js:2426)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
at compiler.js:26076
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
at compiler.js:25986
at Object.then (compiler.js:2417)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25985)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15714
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
next @ core.js:17761
schedulerFn @ core.js:13504
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13488
(anonymous) @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
onHandleError @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ trips-trips-module.js:1

makidoll · 2020-06-21T16:22:42Z

mdc-tab active property is gone. Is there any other way to do this easily?

hyst3ric41 · 2020-06-24T05:33:58Z

mdc-tab active property is gone. Is there any other way to do this easily?

Hello @MAKITSUNE

I used the mdc-tab disabled property to do the trick through a simple function:

<mdc-tab-bar #mdc_tab_bar_id>
   <mdc-tab-scroller>
      <mdc-tab
        *ngFor="let tab of myTabs; index as i"
        [routerLink]="[tab.link]"
        routerLinkActive
        #routerActiveFixer="routerLinkActive"
        [disabled]="canalizeActiveTab(routerActiveFixer.isActive, i)"
        >
         <mdc-tab-label>{{tab.label}}</mdc-tab-label>
      </mdc-tab>
   </mdc-tab-scroller>
</mdc-tab-bar>

Capture the tab-bar element through @ViewChild and then:

canalizeActiveTab(isActive:boolean, tabIndex:number) {
   if (isActive) {
      this.tabsElement.activateTab(tabIndex);
   }
   return false;
}

It's a little tricky way but it works, I hope @trimox can restore the property soon.

trimox added the bug label Nov 3, 2017

trimox added this to the Milestone v0.5.7 milestone Nov 3, 2017

trimox self-assigned this Nov 5, 2017

trimox removed the bug label Nov 5, 2017

trimox removed this from the Milestone v0.5.7 milestone Nov 6, 2017

trimox added the enhancement label Nov 7, 2017

trimox added a commit that referenced this issue Nov 9, 2017

feat(tabs): Add disabled tab + improvements

84f1665

Closes #349 Closes #147

trimox mentioned this issue Nov 9, 2017

feat(tabs): Add disabled tab + improvements #369

Merged

6 tasks

trimox added bug and removed enhancement labels Nov 13, 2017

trimox closed this as completed in #369 Nov 13, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Active mdc-tab #349

Active mdc-tab #349

BrahimLaarif commented Nov 2, 2017

trimox commented Nov 5, 2017

BrahimLaarif commented Nov 7, 2017

trimox commented Nov 7, 2017 •

edited

Loading

trimox commented Nov 13, 2017

phutaneVinayak commented Feb 25, 2019

makidoll commented Jun 21, 2020

hyst3ric41 commented Jun 24, 2020 •

edited

Loading

Active mdc-tab #349

Active mdc-tab #349

Comments

BrahimLaarif commented Nov 2, 2017

trimox commented Nov 5, 2017

BrahimLaarif commented Nov 7, 2017

trimox commented Nov 7, 2017 • edited Loading

trimox commented Nov 13, 2017

phutaneVinayak commented Feb 25, 2019

makidoll commented Jun 21, 2020

hyst3ric41 commented Jun 24, 2020 • edited Loading

trimox commented Nov 7, 2017 •

edited

Loading

hyst3ric41 commented Jun 24, 2020 •

edited

Loading