Reply To: Struggling with Gantt in Angular. Any tips?

[Markov]

Hi,

Yes, of course. Here is a demo with hash router:

<div id="app"></div>

<nav>
  <a href="#/gantt">Gantt</a>
  <a href="#/about">About</a>
</nav>

<script type="module">
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.ganttchart.js';

function loadGantt() {
  const container = document.getElementById('app');
  container.innerHTML = 

<smart-gantt-chart id=”gantt” view=”week” durationUnit=”day”></smart-gantt-chart>
`;

const gantt = document.getElementById(‘gantt’);
gantt.dataSource = [
{
label: ‘Project A’,
dateStart: ‘2025-07-01’,
dateEnd: ‘2025-07-15’,
type: ‘task’
}
];
}

function loadAbout() {
document.getElementById(‘app’).innerHTML = ‘<h2>About Page</h2>’;
}

window.addEventListener(‘hashchange’, route);

function route() {
const hash = location.hash;
if (hash === ‘#/gantt’) {
loadGantt();
} else {
loadAbout();
}
}

route(); // Initial load
</script>`

Best regards,
Peter Stoev

jQWidgets Team
https://www.htmlelements.com/