Online Editor Angular 11 Template
This below angular template for the online editor is developed with Bootstrap 5 & Angular 11.
![](https://i0.wp.com/ngdeveloper.com/wp-content/uploads/2021/05/image.png?resize=860%2C445&ssl=1)
App.component.ts file:
import { Component } from '@angular/core'; import { TypeaheadMatch } from 'ngx-bootstrap/typeahead'; import { CodingService } from './shared/services/coding.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'coding-friend'; selectedSlug: string; program = ''; output = ''; constructor(private codingService: CodingService) { } selected: any; topics: any = [{ title: 'How to convert ArrayList to HashMap ?', slug: 'how-to-convert-arraylist-to-hashmap', id: 100 }, { title: 'How to convert Date to LocalDate ?', slug: 'how-to-convert-date-to-localdate', id: 101 }, ,]; typeaheadOnSelect(event: TypeaheadMatch) { this.selectedSlug = event.item.slug; this.getProgramBySlug(); } getProgramBySlug() { this.program = this.codingService.getProgram(this.selectedSlug); this.output = 'Welcome to Coding Friend'; console.log(this.program); } onRun() { console.log("program is: " + this.program); } }
App.component.html Template source code:
<div class="container-fluid" style="margin-top:80px;"> <div class="container"> <div class="row"> <input [(ngModel)]="selected" [typeaheadOptionsLimit]="7" [typeaheadMinLength]="0" [isAnimated]="true" [typeahead]="topics" typeaheadOptionField="title" class="form-control" (typeaheadOnSelect)="typeaheadOnSelect($event)"> </div> <div class="row"> <div class="col-12 col-md-6"> <!-- Terminal --> <div class="terminal"> <h6 class="text-white m-2 p-2">Write your program</h6> <div class="form-group p-2"> <textarea class="form-control" id="exampleFormControlTextarea1" rows="18" [(ngModel)]="program"></textarea> </div> </div> </div> <div class="col-12 col-md-1 mt-5"> <button type="button" class="btn btn-dark" (click)="onRun()">Run >> </button> </div> <div class="col-12 col-md-5"> <div class="terminal"> <h6 class="text-white m-2 p-2">Program output</h6> <div class="form-group p-2"> <textarea class="form-control" id="exampleFormControlTextarea1" rows="18" [(ngModel)]="output" style="white-space: pre-line;"></textarea> </div> </div> </div> </div> </div> </div> <!-- Toolbar --> <div class="toolbar" role="banner"> <img width="40" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" /> <span>Coding Friend / UtilsCode</span> <div class="spacer"></div> <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter"> <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"> <rect width="400" height="400" fill="none" /> <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff" /> </svg> </a> </div> <div class="content"> <!-- Footer --> <footer> Love Angular? <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star. <div class="github-star-badge"> <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /> </svg> Star </div> </a> <a href="https://github.com/angular/angular" target="_blank" rel="noopener"> <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </a> </footer> <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677"> <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee" /> </svg> </div> <router-outlet></router-outlet>
App.component.scss file:
:host { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; color: #333; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 8px 0; } p { margin: 0; } .spacer { flex: 1; } .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; background-color: #1976d2; color: white; font-weight: 600; } .toolbar img { margin: 0 16px; } .toolbar #twitter-logo { height: 40px; margin: 0 16px; } .toolbar #twitter-logo:hover { opacity: 0.8; } .content { display: flex; margin: 82px auto 32px; padding: 0 16px; max-width: 960px; flex-direction: column; align-items: center; } svg.material-icons { height: 24px; width: auto; } svg.material-icons:not(:last-child) { margin-right: 8px; } .card svg.material-icons path { fill: #888; } .card-container { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .card { border-radius: 4px; border: 1px solid #eee; background-color: #fafafa; height: 40px; width: 200px; margin: 0 8px 16px; padding: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: all 0.2s ease-in-out; line-height: 24px; } .card-container .card:not(:last-child) { margin-right: 0; } .card.card-small { height: 16px; width: 168px; } .card-container .card:not(.highlight-card) { cursor: pointer; } .card-container .card:not(.highlight-card):hover { transform: translateY(-3px); box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35); } .card-container .card:not(.highlight-card):hover .material-icons path { fill: rgb(105, 103, 103); } .card.highlight-card { background-color: #1976d2; color: white; font-weight: 600; border: none; width: auto; min-width: 30%; position: relative; } .card.card.highlight-card span { margin-left: 60px; } svg#rocket { width: 80px; position: absolute; left: -10px; top: -24px; } svg#rocket-smoke { height: calc(100vh - 95px); position: absolute; top: 10px; right: 180px; z-index: -10; } a, a:visited, a:hover { color: #1976d2; text-decoration: none; } a:hover { color: #125699; } .terminal { position: relative; width: 100%; max-width: 600px; border-radius: 6px; padding-top: 45px; margin-top: 8px; overflow: hidden; background-color: rgb(15, 15, 16); } .terminal::before { content: "\2022 \2022 \2022"; position: absolute; top: 0; left: 0; height: 4px; background: rgb(58, 58, 58); color: #c2c3c4; width: 100%; font-size: 2rem; line-height: 0; padding: 14px 0; text-indent: 4px; } .terminal pre { font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; color: white; padding: 0 1rem 1rem; margin: 0; } .circle-link { height: 40px; width: 40px; border-radius: 40px; margin: 8px; background-color: white; border: 1px solid #eeeeee; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: 1s ease-out; } .circle-link:hover { transform: translateY(-0.25rem); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); } footer { margin-top: 8px; display: flex; align-items: center; line-height: 20px; } footer a { display: flex; align-items: center; } .github-star-badge { color: #24292e; display: flex; align-items: center; font-size: 12px; padding: 3px 10px; border: 1px solid rgba(27,31,35,.2); border-radius: 3px; background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); margin-left: 4px; font-weight: 600; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .github-star-badge:hover { background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%); border-color: rgba(27,31,35,.35); background-position: -.5em; } .github-star-badge .material-icons { height: 16px; width: 16px; margin-right: 4px; } svg#clouds { position: fixed; bottom: -160px; left: -230px; z-index: -10; width: 1920px; } /* Responsive Styles */ @media screen and (max-width: 767px) { .card-container > *:not(.circle-link) , .terminal { width: 100%; } .card:not(.highlight-card) { height: 16px; margin: 8px 0; } .card.highlight-card span { margin-left: 72px; } svg#rocket-smoke { right: 120px; transform: rotate(-5deg); } } @media screen and (max-width: 575px) { svg#rocket-smoke { display: none; visibility: hidden; } }