change height and width of codemirror in angular

You can just add your component inside a wrapper/container element.

<div class="container">
  <ngx-codemirror
    [(ngModel)]="sql_input"
    [options]="{ lineNumbers: true, theme: 'material', mode: 'markdown' }"
  ></ngx-codemirror>
</div>

And then set the desired width and height to the container.

.container {
  width: 500px;
  height: 500px;
}

You can try to add in your componentwithcodemirror.css to resize only texteditor

:host() ::ng-deep .CodeMirror{
height:250px
}

If you disable Angular view encapsulation in the component decorator, then you can override the .CodeMirror styles. Providing the CodeMirror options as a component property allows you to set viewportMargin: Infinity, which it seems you can't do by providing it directly as an attribute in the HTML. The combination of that with height: auto causes the editor to automatically resize vertically to fit its contents.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent implements OnInit {
  @ViewChild('CodeMirror') private cm: any;
  codemirrorOptions = {
    lineNumbers: false,
    lineWrapping: true,
    viewportMargin: Infinity,
  };
  ...

my.component.html:

<ngx-codemirror
  #CodeMirror
  [(ngModel)]="myModel"
  (ngModelChange)="onChanged($event)"
  [options]="codemirrorOptions"
  ngDefaultControl
></ngx-codemirror>

my.component.scss:

.CodeMirror {
  height: auto;
}