Nothing displayed when following documentation

[thardy]

I setup a simple example following your instructions to the letter, and nothing displays for...

<ace [config]="config" [mode]="'text'" [theme]="'github'" [(value)]="content"></ace>

After hours of troubleshooting, the minimum change I can make that caused something to finally show up in the browser is the following...
<ace style="height: 200px;" [config]="config" [mode]="'text'" [theme]="'github'" [(value)]="content"></ace>

This is in a brand new @angular/cli generated app (Angular 12) with zero styling - my styles.scss is completely empty and so is the component .scss file.

Why does this component not work out of the box?

[sconix]

It works if you have correctly wrapped it. There can not be a html block that needs height that works in all situations. This component defaults to modern flex box styling hence you need to have some layout styles in you component or otherwise you need to define fixed height for it.

[Robin-Lord]

I'm facing a similar problem - when I follow the instructions I don't see anything in where the ace editor should be.

I've tried styling it as height 200px and display block but then I just get an empty box and when I inspect element - the ace editor object seems to be empty (see attached). Not seeing any build errors or errors in console. Any help would be really appreciated!

[mathias-ewald]

Can someone provide an example, please?

This example renders the ace component at full size, but there's not content:

<div style="flex: 1 1 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;">
    <ace style="flex: 1 1 100%;"
        [config]="{ fontSize: '12pt' }" 
        [mode]="'text'" 
        [theme]="'github'" 
        [(value)]="code">
    </ace>    
</div>