How to set multi-line text within a Angular chip

3 mins read

Step 1: Implement Chip component using our getting started documentation.

Step 2: To achieve multiline text, you can utilize the Angular Chips cssClass property by setting the required height and width for the chip and using pre-wrap CSS style. This enables you to have the multiple lines as text in the chip component.

[app.component.html]

<div class="sample-padding">
    <ejs-chiplist id="chip-default">
        <e-chips>
            <e-chip  [text]='content' cssClass="custom"></e-chip>
        </e-chips>
    </ejs-chiplist>
</div>
 
…
<style>
.custom {
    width: 100px !important;
    height: 50px !important;
}
.e-chip-text {
    white-space: pre-wrap !important;
}
</style>

[app.component.ts]

…
public content = "Breaking the line"
…

Screenshot:

Sample: https://stackblitz.com/edit/angular-d1mbxr-y5wcv9?file=src%2Fapp.component.html,src%2Fapp.component.ts

Did you find this information helpful?

Yes

Comments (0)

How to set multi-line text within a Angular chip

Access denied