Showing Toolbar in 2 rows CKEditor5 Angular

Question

I am working on ckeditor5 in angular 10. I have created toolbar correctly but not able to split toolbar in 2 lines.

import { Component } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { environment } from '../../../../environments/environment';
import  * as Editor from '../../../ckeditor5-build/ckeditor.js';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  editor= Editor;
  editorData ="hello world";
  config = { toolbar: ['alignment',
   'heading', '|', 
   'bold', 'italic','underline' ,'|',
   'fontFamily','fontColor','fontSize',
   '|',
   'strikeThrough','superScript','redo','undo',
   '|',
   'alignment','numberedList','bulletedList'
   ]
   }
  
  constructor(){   

  }  
}

home.component.html

<ckeditor
[data]="editorData"
[editor]="editor"
[config]="config"
id="classic-editor"
name="classic-editor"></ckeditor>

Output is as below

Is it possible by which we can show remaining option in next row instead of view more option.

Answer 1

We can use below property (shouldNotGroupWhenFull) for it:

const config = {
    toolbar: {
        items: [ 'bold', 'italic', '|', 'undo', 'redo' ],    
        shouldNotGroupWhenFull: true
    }
};