import { Component, mount, xml, signal } from "@odoo/owl";
class Root extends Component {
static template = xml`<div>
Hello Owl!
<t t-out="!!this.s()"/>
<div t-if="this.isVisible()">
<div t-if="true">
<span t-ref="this.s">asdf</span>
</div>
</div>
</div>`;
s = signal.ref();
isVisible = signal(true);
setup() {
setInterval(() => {
this.isVisible.set(!this.isVisible())
}, 2000)
}
}
mount(Root, document.body, { templates: TEMPLATES, dev: true });
and this one:
import { Component, mount, xml, signal } from "@odoo/owl";
import { Dialog } from "./dialog";
class Wrapper extends Component {
static template = xml`<div t-if="this.isVisible()"><t t-call-slot="default"/></div>`
isVisible = signal(true);
setup() {
setInterval(() => {
this.isVisible.set(!this.isVisible());
}, 2000)
}
}
class Root extends Component {
static components = { Wrapper };
static template = xml`
<button t-on-click="() => this.toggle()">Show</button>
<div><t t-out="this.isRefActif()"/> </div>
<t t-if="this.isVisible()">
<Wrapper title="'Hello'" onClose="() => this.toggle(false)">
<div t-debug="" t-ref="this.myRef">Coucou</div>
</Wrapper>
</t>`;
isVisible = signal(false);
myRef = signal.ref();
toggle(visible) {
this.isVisible.set(!this.isVisible());
}
isRefActif() {
return this.myRef() !== null;
}
}
mount(Root, document.body, { templates: TEMPLATES, dev: true });
and this one: