<router><route ...><route ...></router>
)<markdown>...</markdown>
)
<template>
<slot name="user">
<p>Default content for the user</p>
</slot>
<slot name="address">
<!-- no default content provided -->
</slot>
</template>
<!-- and in the consumer -->
<some-element>
<user-card slot="user"></user-card>
<address slot="address">
<p>Line 1</p>
<p>Line 2</p>
</address>
</some-element>
A basic data table.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Very structured, and yet super hard to understand still.
A silly straw man:
<mat-table [dataSource]="dataSource">
<mat-table-column>
<th>No.</th>
<td></td>
</mat-table-column>
</mat-table>
<ng-content>
<mat-card>
<mat-card-actions slot="actions">
<button>Click me</button>
</mat-card-actions>
</mat-card>
<div *ngFor="let user of users" slot="user">
</div>
<div *ngForSlot="user">
<div class="wrapper">
<ng-content></ng-content>
</div>
</div>
<menu>
<item></item>
<item></item>
<item></item>
-----
<item></item>
<item></item>
</menu>
<div *ngFor="let item of data">
<ng-content [content]="item"></ng-content>
<*item></*item>
</div>
@Component({...})
class FooCmp {
@Content('slotname', {multi: true})
data: Content<?>[];
}
<mat-card>
<:header>text</:header>
<:header>
<span>Title</span>
<span>Sub-title</span>
</:header>
</mat-card>
<div *ngIf="expr">
...
</div>
template + context
@Template(
template: '{{name}}'
)
export interface Foo {
name: string;
}
template + context = content
``
var Foo = makeTemplate<IFoo>('{{name}}');
@Component({
…
})
export class Foo {
@Input('name') name: IFoo['name'],
}
render(Foo, {name: 'Alex'});
Observable<Foo>.map(data => render(Foo, data)) => Observable<Content>
<ng-template-outlet [template]="Foo" [context]="{name: …}">
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing