How to create a new Angular Component

[alavin]

Hi,

Thank you for this build. I am having an issue trying to create a new template.

For example i am trying to create Data Tables template.
To do that I've first run the command: php artisan ng:component data-tables

Which create new files in
angular/app/components/data-tables/data-tables.component.html
angular/app/components/data-tables/data-tables.component.js
angular/app/components/data-tables/data-tables.scss

In data-tables.component.html i put some HTML. Basically i copied the default source code from ADMINLTE.

After that I created a new state route in routes.config.js
.state('app.datatables', {
url: '/data-tables',
data: {
auth: true
},
views: {
'main@app': {
template: ''
}
}
})

And finally in nav-sidebar.component.html
I updated the row:
<li><a ui-sref="app.datatables"><i class="fa fa-circle-o"></i> Data tables</a></li>

Therefore now i am able to click on the link and load /data-tables but i get a blank page.

Is there something that i am missing?

Thanks for you help.

Vince.

[silverbux]

Hi vince, this is a current bug, basically you have to restart gulp && gulp watch whenever you create new file,
just control + c the current gulp and enter gulp && gulp watch again

[alavin]

Mmm.. I tried couple of times but no luck.

Is my procedure correct?

[alavin]

in routes.config.js i added

.state('app.datatables', { url: '/data-tables', data: { auth: true }, views: { 'main@app': { template: '<data-tables></data-tables>' } } })

template: '<data-tables></data-tables>' seems doesn't load the file

angular/app/components/data-tables/data-tables.component.html

Indeed if i try to insert something inside template: '<data-tables>Test message</data-tables>'

I can see Test message displayed on the page.

[alavin]

Never mind I've made it works.

My fault i've changed something in index.components.js

[silverbux]

alright, actually i was trying it and i also experienced it, apparently data-tables is a reserved word, probably because of the library data-tables, it's weird when i tried to changed it to thedata-tables it worked. you might want to take a look on that also

[alavin]

Yes indeed . i renamed in datatables without - and it works.

Shame i spent half day on this.

Thanks.
Vince.