Angular Setup with Tetrons Editor

1

Install

1Step 1

npm install -g @angular/cli

2Step 2

ng new tetrons-angular

3Step 3

cd tetrons-angular

4Step 4

Choose: Yes for routing and CSS for styling.

2

Modify app.component.html

1<div class="container">
2  <h2>Tetrons Editor</h2>
3  <iframe
4    src="https://staging.tetrons.com/editor/dist/editor-host.html"
5    width="100%" height="600"
6    style="border: none;"
7    allowfullscreen>
8  </iframe>
9</div>
3

Modify app.component.css

1.container {
2  height: 100vh;
3  width: 100vw;
4  display: flex;
5  flex-direction: column;
6}
7iframe {
8  flex: 1;
9}
10h2 {
11  text-align: center;
12}
4

Run

1Step 1

ng serve

2Step 2

Go to: http://localhost:4200

Output Preview

Output Preview
Chatbot