NGX Projection and Elements Querying
======

# Table of Contents
1. [Content projection](#content-projection)
2. [Content element querying](#content-element-quering)
2. [View element querying](#view-element-quering)

# Content projection [](#){name=content-projection}

```typescript
// article.component.ts
@Component({
  selector: 'app-article'
  template: `
    <h1>{{title}}</h1>
    <ng-content></ng-content>
  `
})
export class ArticleComponent {
  @Input() title: string;
}

// app.component.ts
@Component({
  selector: 'app'
  template: `
    <app-article title="Article 1">
      <p>Article content</p>
    </app-article>
  `
})
export class AppComponent {}
```

## Projection slot selectors

In addition to `ng-content` there is a `select` attribute available to specify what part of the parent content to be projected.

This is handy with multiple projection slots.

```html
  <!-- article.component.html -->
  <h1>{{title}}</h1>
  <ng-content select=".article-content"></ng-content>
  <ng-content select=".article-footer"></ng-content>
```

### HTML tag

```html
  <!-- article.component.html -->
  <h1>{{title}}</h1>
  <ng-content select="p"></ng-content>
  <ng-content select="footer"></ng-content>

  <!-- app.component.html -->
  <app-article title="Article 1">
    <p>Article content</p>
    <footer>Conclusion</footer>
  </app-article>
```

### Attribute

```html
  <!-- article.component.html -->
  <h1>{{title}}</h1>
  <ng-content select="[article-content]"></ng-content>
  <ng-content select="[article-footer]"></ng-content>

  <!-- app.component.html -->
  <app-article title="Article 1">
    <p article-content>Article content</p>
    <p article-footer>Conclusion</p>
  </app-article>
```

### CSS class

```html
  <!-- article.component.html -->
  <h1>{{title}}</h1>
  <ng-content select=".article-content"></ng-content>
  <ng-content select=".article-footer"></ng-content>

  <!-- app.component.html -->
  <app-article title="Article 1">
    <p class="article-content">Article content</p>
    <p class="article-footer">Conclusion</p>
  </app-article>
```

### Component

# Content element querying [](#){content-element-querying}

## Content child

## Content children

# View element querying [](#){view-element-querying}

## View child

## View children