Skip to content

docs(tree): add docs to cdk-tree #9040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 11, 2018
Merged

docs(tree): add docs to cdk-tree #9040

merged 1 commit into from
Jan 11, 2018

Conversation

tinayuangao
Copy link
Contributor

No description provided.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 18, 2017
@tinayuangao tinayuangao requested a review from jelbourn December 18, 2017 21:04
julianobrasil
julianobrasil reviewed Dec 19, 2017
View reviewed changes
src/cdk/tree/tree.md Outdated

### Using the CDK tree

#### Wring your tree template
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: Wiring?

jelbourn
jelbourn reviewed Dec 19, 2017
View reviewed changes
src/cdk/tree/tree.md Outdated

#### Flat tree

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's some duplication between the cdk docs and the mat docs. Would it make sense to distinguish these similar to the table docs?

jelbourn
jelbourn reviewed Jan 3, 2018
View reviewed changes
src/cdk/tree/tree.md Outdated
@@ -0,0 +1,157 @@
The `<cdk-tree>` enable developers to build customized tree for structured data. The cdk-tree
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

The `<cdk-tree>` enables developers to build a customized tree experience for structured data.

src/cdk/tree/tree.md Outdated
@@ -0,0 +1,157 @@
The `<cdk-tree>` enable developers to build customized tree for structured data. The cdk-tree
provides a foundation to build other features such as filtering on top of tree.
For a Material design styled tree, see `<mat-tree>` which builds on top of the `<cdk-tree>`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'D' in "Material Design" should also be capitalized

src/cdk/tree/tree.md Outdated
provides a foundation to build other features such as filtering on top of tree.
For a Material design styled tree, see `<mat-tree>` which builds on top of the `<cdk-tree>`.

There are two types of trees: Flat tree and Nested Tree. The DOM structures are different for
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"flat" and "nested" don't need to be capitalized

src/cdk/tree/tree.md Outdated
#### Flat tree

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead
are rendered as siblings in sequence. An instance of TreeFlattener is used to generate the flat list
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put class names in backticks

`TreeFlattener`

(here and a few other places)

src/cdk/tree/tree.md Outdated
#### Nested tree

In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an
outlet to keep all the children nodes.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

The parent node contains a node outlet into which children are projected

src/cdk/tree/tree.md Outdated
in DOM.


#### When
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

#### Conditional templates

src/cdk/tree/tree.md Outdated


#### When
Different tree node templates can be defined via the `when:` with a function.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

The tree may include multiple node templates, where a template is chosen
 for a particular data node via the `when` predicate of the template.

src/cdk/tree/tree.md Outdated

#### When
Different tree node templates can be defined via the `when:` with a function.
Please note that the tree will not update the template it uses if the data object does not change.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth calling this out here, since it's the same for any other binding on the node?

src/cdk/tree/tree.md Outdated

#### Connecting the tree to a data source

Similar to `cdl-table`, data is provided to the tree through a `DataSource`. When the tree receives
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"cdl" -> "cdk"

src/cdk/tree/tree.md Outdated

#### Flat tree

The flat tree data source should be responsible for the node expansion/collapsing events, since when
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"should be responsible" -> "is responsible"

@tinayuangao
Copy link
Contributor Author

Comments addressed. Please take a look. Thanks!

@tinayuangao tinayuangao force-pushed the tree-docs branch 2 times, most recently from 4764d49 to 5e253dd Compare January 10, 2018 18:08
jelbourn
jelbourn approved these changes Jan 11, 2018
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Jan 11, 2018
@tinayuangao tinayuangao merged commit 357cebf into angular:tree Jan 11, 2018
tinayuangao added a commit that referenced this pull request Jan 23, 2018
@tinayuangao
docs(tree): add guide to cdk-tree (#9040)
fee9eba
tinayuangao added a commit that referenced this pull request Feb 5, 2018
@tinayuangao
docs(tree): add guide to cdk-tree (#9040)
22bdfdc
tinayuangao added a commit that referenced this pull request Feb 9, 2018
@tinayuangao
docs(tree): add guide to cdk-tree (#9040)
8e0bf23
jelbourn pushed a commit that referenced this pull request Feb 12, 2018
@tinayuangao @jelbourn
docs(tree): add guide to cdk-tree (#9040)
b5ffe47
tinayuangao added a commit that referenced this pull request Feb 13, 2018
@tinayuangao
docs(tree): add guide to cdk-tree (#9040)
ccd7de3
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@julianobrasil julianobrasil julianobrasil left review comments

@jelbourn jelbourn jelbourn approved these changes

@andrewseguin andrewseguin Awaiting requested review from andrewseguin

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@tinayuangao @jelbourn @julianobrasil @googlebot