docs: add what is angular topic

.pullapprove.yml

@@ -920,7 +920,9 @@ groups:
           'aio/content/examples/getting-started-v0/**',
           'aio/content/examples/getting-started/**',
           'aio/content/start/**',
-          'aio/content/images/guide/start/**'
+          'aio/content/images/guide/start/**',
+          'aio/content/examples/what-is-angular/**',
+          'aio/content/guide/what-is-angular.md'
           ])
     reviewers:
       users:

aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,61 @@
+import { browser, element, by, logging } from 'protractor';
+
+
+describe('What is Angular', () => {
+
+  const paragraphs = element.all(by.css('p'));
+  const buttons = element.all(by.css('button'));
+  const templateButton = buttons.get(1);
+  const templateText = paragraphs.get(3);
+  const messageButton = buttons.get(0);
+  const messageText = paragraphs.get(2);
+  const ngIfButton = buttons.get(2);
+  const ngIfText = paragraphs.get(4);
+  const diButton = buttons.get(3);
+
+  beforeEach(() => browser.get(''));
+
+  // helper function to test what's logged to the console
+  async function logChecker(contents) {
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
+    expect(messages.length).toBeGreaterThan(0);
+  }
+
+  it('should display Hello World', async () => {
+    expect(await element(by.css('hello-world h2')).getText()).toEqual('Hello World');
+  });
+
+  // Test for alert
+  it('should display js alert after button click', async () => {
+    await messageButton.click();
+    const alert = browser.switchTo().alert();
+    expect(await alert.getText()).toEqual('Hello, World');
+    await alert.accept();
+  });
+
+  it('should display blue a sentence', async () => {
+    expect(await messageText.getCssValue('color')).toEqual('rgba(0, 0, 255, 1)');
+  });
+
+  // Hello World Template section
+  it('should add 123 to editable p tag', async () => {
+    await templateButton.click();
+    await templateText.click();
+    await templateText.sendKeys('123');
+    expect(await templateText.getText()).toEqual('You can edit me!123');
+  });
+
+  // Test for ngIf section
+  it('should display edit instructions after button click', async () => {
+    await ngIfButton.click();
+    expect(await ngIfText.getText()).toEqual('You can edit the following paragraph.');
+  });
+
+  // Test for DI section
+  it('should log the count', async () => {
+    await diButton.click();
+    await logChecker(0);
+  });
+
+});

aio/content/examples/what-is-angular/src/app/app.component.html

@@ -0,0 +1,9 @@
+<h1>Understanding Angular</h1>
+<!-- #docregion hello-world-selector -->
+<hello-world></hello-world>
+<!-- #enddocregion hello-world-selector -->
+<hello-world-interpolation></hello-world-interpolation>
+<hello-world-bindings></hello-world-bindings>
+<hello-world-template></hello-world-template>
+<hello-world-ngif></hello-world-ngif>
+<hello-world-di></hello-world-di>

aio/content/examples/what-is-angular/src/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }

aio/content/examples/what-is-angular/src/app/app.module.ts

@@ -0,0 +1,30 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { HelloWorldComponent } from './hello-world/hello-world.component';
+import { HelloWorldTemplateComponent } from './hello-world-template.component';
+import { HelloWorldNgIfComponent } from './hello-world-ngif/hello-world-ngif.component';
+import { HelloWorldDependencyInjectionComponent } from './hello-world-di/hello-world-di.component';
+import { HelloWorldInterpolationComponent } from './hello-world-interpolation/hello-world-interpolation.component';
+import { HelloWorldBindingsComponent } from './hello-world-bindings/hello-world-bindings.component';
+
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    HelloWorldComponent,
+    HelloWorldTemplateComponent,
+    HelloWorldNgIfComponent,
+    HelloWorldDependencyInjectionComponent,
+    HelloWorldInterpolationComponent,
+    HelloWorldBindingsComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html

@@ -0,0 +1,6 @@
+<!-- #docregion event-binding -->
+<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
+<!-- #enddocregion -->
+<!-- #docregion bindings -->
+<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
+<!-- #enddocregion -->

aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component ({
+  selector: 'hello-world-bindings',
+  templateUrl: './hello-world-bindings.component.html'
+})
+export class HelloWorldBindingsComponent {
+    fontColor = 'blue';
+    sayHelloId = 1;
+    canClick = false;
+    message = 'Hello, World';
+// #docregion method
+    sayMessage() {
+        alert(this.message);
+    }
+// #enddocregion
+}

aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html

@@ -0,0 +1,3 @@
+<h2>Hello World: Dependency Injection</h2>
+<button (click)="onLogMe()">Log me!</button>
+<p>Be sure to open the console to view the output!</p>

aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Logger } from '../logger.service';
+
+@Component({
+  selector: 'hello-world-di',
+  templateUrl: './hello-world-di.component.html'
+})
+export class HelloWorldDependencyInjectionComponent  {
+  count = 0;
+
+  constructor(private logger: Logger) {
+  }
+
+  onLogMe(){
+    this.logger.writeCount(this.count);
+    this.count++;
+  }
+}
+

aio/content/examples/what-is-angular/src/app/hello-world-example.html

@@ -0,0 +1,4 @@
+<hello-world>
+    <h2>Hello World</h2>
+    <p>This is my first component!</p>
+</hello-world>

aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.html

@@ -0,0 +1,3 @@
+<!-- #docregion say-hello -->
+<p>{{ message }}</p>
+<!-- #enddocregion say-hello -->

aio/content/examples/what-is-angular/src/app/hello-world-interpolation/hello-world-interpolation.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component ({
+  selector: 'hello-world-interpolation',
+  templateUrl: './hello-world-interpolation.component.html'
+})
+export class HelloWorldInterpolationComponent {
+    message = 'Hello, World!';
+}

aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html

@@ -0,0 +1,9 @@
+<h2>Hello World: ngIf!</h2>
+<button (click)="onEditClick()">Make text editable!</button>
+<div *ngIf="canEdit; else noEdit">
+    <p>You can edit the following paragraph.</p>
+</div>
+<ng-template #noEdit>
+    <p>The following paragraph is read only. Try clicking the button!</p>
+</ng-template>
+<p [contentEditable]="canEdit">{{ message }}</p>

aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts

@@ -0,0 +1,21 @@
+// #docplaster
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'hello-world-ngif',
+    templateUrl: './hello-world-ngif.component.html'
+  })
+export class HelloWorldNgIfComponent {
+  message = 'I\'m read only!';
+  canEdit = false;
+
+  onEditClick(){
+    this.canEdit = !this.canEdit;
+    if (this.canEdit) {
+      this.message = 'You can edit me!';
+    } else {
+      this.message = 'I\'m read only!';
+    }
+  }
+}
+

aio/content/examples/what-is-angular/src/app/hello-world-template.component.ts

@@ -0,0 +1,24 @@
+// #docplaster
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'hello-world-template',
+    template: `
+        <h2>Hello World Template</h2>
+        <button (click)="onEditClick()">Make text editable!</button>
+        <p [contentEditable]="canEdit">{{ message }}</p>
+        `
+  })
+  export class HelloWorldTemplateComponent  {
+    message = 'I am read only!';
+    canEdit = false;
+    onEditClick(){
+      this.canEdit = !this.canEdit;
+      if (this.canEdit) {
+        this.message = 'You can edit me!';
+      } else {
+        this.message = 'I am read only!';
+      }
+    }
+  }

aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts

@@ -0,0 +1,14 @@
+// #docplaster
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hello-world',
+  template: `
+    <h2>Hello World</h2>
+    <p>This is my first component!</p>
+    `,
+})
+export class HelloWorldComponent  {
+  // The code in this class drives the component's behavior.
+}

aio/content/examples/what-is-angular/src/app/logger.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class Logger {
+  writeCount(count: number) {
+    console.warn(count);
+  }
+}

aio/content/examples/what-is-angular/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Helloworld</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

aio/content/examples/what-is-angular/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

aio/content/examples/what-is-angular/stackblitz.json

@@ -0,0 +1,8 @@
+{
+  "description": "What is Angular?",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["overview", "angular"]
+}