Skip to content
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

Initial conversion to angle brackets #87

Merged
merged 3 commits into from
Feb 16, 2019
Merged

Initial conversion to angle brackets #87

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6b2334
Initial conversion to angle brackets
DanMonroe Jan 24, 2019
c0876df
Update guides/writing-addons/intro-tutorial.md
rwjblue Jan 25, 2019
d3e5b68
Merge branch 'master' into anglebrackets
Feb 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions guides/writing-addons/intro-tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Our goal is to be able to pass the `buttonName` value to the addon, just like we
```hbs
<!-- This is a handlebars file in the app using the addon -->

{{addon-name buttonLabel="Register"}}
<AddonName buttonLabel="Register" />
cah-danmonroe marked this conversation as resolved.
Show resolved Hide resolved
```

### Trying out the addon template in an app
Expand All @@ -61,7 +61,7 @@ There are several options to see the addon in action. We could use `npm link` or
1. `yarn link <addon-name>` or `npm link <addon-name>`.
2. In the Ember app's `package.json`, add a `devDependencies` entry for your addon, like `"addon-name": "*"`. The `*` means that it will include all version numbers of our addon.
3. Run `yarn install` or `npm install` in the app
4. Add a reference to your addon's component somewhere in an app template, like `{{component-name buttonLabel="Register"}}`
4. Add a reference to your addon's component somewhere in an app template, like `<ComponentName @buttonLabel="Register" />`
5. Run a local server with `ember serve` and visit [http://localhost:4200](http://localhost:4200)

We should now see our addon in action!
Expand Down Expand Up @@ -92,9 +92,9 @@ Now, an app can use the addon with their own content inside:
```hbs
<!-- This is a handlebars file in the app using the addon -->

{{#addon-name}}
<AddonName>
Register <img href="./images/some-cute-icon.png" alt="">
{{/addon-name}}
</AddonName>
```

Whatever goes inside the block form addon will show up where the `{{yield}}` was. This is the markup that renders in the app:
Expand Down