Question about tabs

[dhasilin]

I want to use tabs like in original materialize-css project. And In you exampel tabs are used only for navigation. Do you have any suggestion how to implement them to follow original structure?

I don't want to use brute solution like bunch of *ngIf calls...(and not sure if it is really possible)

In other hand it's quite nice to load content for each tab separately...But it looks too complex because not all pages contain tabs (in my app)... And each page that contains tabs contains different set of tabs....

I'm open to hear any suggestion :)

[rubyboy]

How about this?

import {MaterializeDirective} from "../../src/index";
import {Component} from "angular2/core"

@Component({
    selector: "tabs",
    directives: [MaterializeDirective],
    template: `
    <div class="row">
      <div class="col s12">
        <ul class="tabs" materialize="tabs">
          <li class="tab col s3"><a href="#test1">Test 1</a></li>
          <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
          <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
          <li class="tab col s3"><a href="#test4">Test 4</a></li>
        </ul>
      </div>
      <div id="test1" class="col s12">Test 1</div>
      <div id="test2" class="col s12">Test 2</div>
      <div id="test3" class="col s12">Test 3</div>
      <div id="test4" class="col s12">Test 4</div>
    </div>
    `
})
export class Tabs {

}

[dhasilin]

@rubyboy well, it working just fine :)
I was really confused by example with routing outlet :)
And I'm really happy that I could use this approach for now :)

[dhasilin]

@rubyboy unfortunately it's working well with my seed app (HashLocationStrategy)
But redirecting me to main page with some error in consioole with real app (PathLocationStrategy used)
I'm trying to catch the error and read it :)
UPDT: Tabs are working, just after switching to selected tab I'm getting navigated ...working on that

Any suggestion?

I will for sure write a blog post "How to" After I resolve this issue :)

[rubyboy]

I've added the simple tabs example to the repo. Also, deployed the latest version (bundled) to http://angular2-materialize.surge.sh .

[dhasilin]

Thanks for helping me, simple tabs are working nice :)

But it looks like at http://angular2-materialize.surge.sh routing tabs are failing :(

[rubyboy]

I just needed to deploy the latest version (after the angular upgrade) :)
Does it work for you now?

[dhasilin]

Yes, almost everithing is fine now :)
100% for hashLcoation strategy,

and for path location strategy resut is unknown because we made decision not to go for angular2 so quickly :) Wait until it will be stable and more UI components will be available :)

[rubyboy]

Yeah, unfortunately things still break with every beta release. I wish it was most stable and we wouldn't need to make changes every week or two :(