Last Updated
Viewed 10 Times

Below is my example

https://stackblitz.com/edit/ngx-codemirror-g9orbw?file=src/app/app.component.css

p {
  font-family: Lato;
}
.container {
  width: 500px;
  height: 50px;
}

<div class="container">
    <ngx-codemirror #codemirror [options]="codeMirrorOptions" [(ngModel)]="obj"
        (ngModelChange)="setEditorContent($event)">
    </ngx-codemirror>
</div>

I need to set height and width of codemirror, but its not setting. Please help, Thanks

Similar Question 1 : angular 8 with ngx-codemirror

I am new in angular. I want to codemirror in my Angular application. I created an Angular application using angular cli. On GitHub I found a Codemirror componente: ngx-codemirror. I followed the instructions as far as described. I have in my root project directory

npm install @ctrl/ngx-codemirror@2.0.0 codemirror

executed. My code currently looks like this: app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule, CodemirrorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app/app.component.ts:

import { Component } from '@angular/core';

const defaults = {
  markdown:
    '# Heading\n\nSome **bold** and _italic_ text\nBy [Scott Cooper](https://github.com/scttcper)',
  'text/typescript':
    `const component = {
  name: "@ctrl/ngx-codemirror",
  author: "Scott Cooper",
  repo: "https://github.com/typectrl/ngx-codemirror"
};
const hello: string = 'world';`,
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyBuilder';

  readOnly = false;
  mode = 'markdown';
  options: any = {
    lineNumbers: true,
    mode: this.mode,
  };
  defaults = defaults;

  changeMode() {
    this.options = {
      ...this.options,
      mode: this.mode,
    };
  }

  handleChange($event) {
    console.log('ngModelChange', $event);
  }

  clear() {
    this.defaults[this.mode] = '';
  }
}

app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
  <ngx-codemirror
    [options]="options"
    [ngModel]="defaults[mode]"
    [disabled]="readOnly"
    [autoFocus]="true"
    (ngModelChange)="handleChange($event)"
  ></ngx-codemirror>
</ul>

app/app.component.css

@import "~codemirror/lib/codemirror";
@import "~codemirror/theme/material";

But I don't see the component. Can someone help me please.

i am using angular 7 with latest ngx-codemirror.

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

The final looks is shown as below, which is too big size for me. Just wonder how to resize it to be more smaller in height and width.

enter image description here

Similar Question 3 : Toggle width & height of image

import { Component, OnInit, ElementRef, Input, ViewChild, Output, EventEmitter } from '@angular/core';
declare var JQuery: any; 


export class PresentationComponent implements OnInit {

constructor( public _eleRef : ElementRef,public CommonComponentService:CommonComponentService ) {
   }
   ngOnInit() {
jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
        jQuery('#exampleImage').width(jQuery(window).width());
        jQuery('#exampleImage').height(jQuery(window).height());
     });
     
  }
}
.slide-control {
    z-index: 5;
    background-color: #323232;
    overflow: hidden;
    border: 0;
    padding: 0;
    width: 100%;
    color: #fff;
    font-size: 13px;
    max-height: 56px;
    min-height: 50px;
    ///text-align: center;
}

.control {
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
}

.slide-control #fullscreen {
    float: right !important;
}

.imageArea {
    background-color: #e5e5e5;
    border: 1px inset #323232;
}

.resize {
    width: 100%;
}
<div class="row imageArea">
    <div class="mx-auto">
        <img [src]="newUrl" id="exampleImage" class="img-fluid" alt="Responsive image">
    </div>
    <div class="slide-control form-inline">
        <div *ngIf="!buttonShowFlag" class="mx-auto">
            <span class="control" (click)="back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
            <span>{{count+1}} / {{finalCount}}</span>
            <span class="control" (click)="next()"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
        </div>
        <div class="mx-auto" *ngIf="buttonShowFlag">
            <button (click)="cfuModal.show()" class="btn">{{'Stepper.Next' | translate}}</button>
        </div>

        <div class="fullscreen float-right">
            <span class="control" id="download" *ngIf="download"><a href={{downloadLink}} download><i class="fa fa-download" aria-hidden="true"></i></a></span>
            <span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

hello i am using angular 2. i am design my own image viewer with custom controls. there is one full-screen button available . i want to make my image to be full-screen on click of that button & when i again click on that button it should go to previous state means i want to make my it toggle. i am embedding jquery in angular 2. when i click on that it makes my image full-screen but how can i make it toggle.

Similar Question 4 (2 solutions) : Change width and height of mat-expansion indicator

Similar Question 5 (1 solutions) : Set height of element to screen height - Angular2

Similar Question 9 (2 solutions) : Set element height from another element in Angular2

cc