[Angular 4] - Is this working with Angular Material

[lmarcelocc]

Hi all,

I've tried to use this on a angular 4.4 project, I get no errors but the table of contents is not updated while I'm scrolling.

I just took the example from https://github.com/zurfyx/angular-contents/blob/master/example/app/app.component.html, and on my app module I've imported import { ContentsModule } from 'angular-contents'; and added it to the imports array.

Anyone can help me please?

Thank you in advance.

Best regards,
Marcelo

[zurfyx]

Hey Marcelo,

Subscriptions are currently done the Angular 4 way, and I believe the rest of the source code should be the same with Angular 4 and Angular 5.

Make sure that these pieces of CSS code are loaded on your layout (you can find the complete version on the project readme).

.contents-table {
  // Do not use margin here. It will be overwritten.
  position: absolute; // <-- must have.
  padding: 2rem;
}

.contents-table.sticky {
  position: fixed; // <-- must have.
  top: 0; // <-- must have.
}

If you have a sample project uploaded, I can have it a look as well if you want :)

[zurfyx]

@lmarcelocc I forgot to add rxjs to peerDependencies, which is the one that notifies parts of the library about window changes. From v2.0.1 you'll be warned to install rxjs ^5.5.2. It might have been your issue.

[lmarcelocc]

Hey @zurfyx!

Thank you for your support. I've tried in a clean project and it works well. Tomorrow will try to find the issue. Thus, let me ask you something. This can work with dynamic sections name and not on the root url? For example, instead of having this:

<div [contentsSection]="'section-one'">
... 
</div>
<!-- Table of Contents -->
  ...
<a href="#section-one" contentsLink>link</a>

Having this:

<div [contentsSection]="'{{section}}'">
... 
</div>
<!-- Table of Contents -->
  ...
<a href="posts/comments#{{section}}" contentsLink>link</a>

But I will try it again tomorrow.

Thank you again ;)

[zurfyx]

@lmarcelocc Yes it does work!

Remember that variables inside bindings don't carry {{. A string [foo]="'text'", a variable [foo]="variable"

You can have something like this:

export class AppComponent {
  v = 'section-one';
}
<div [contentsSection]="v">
<a [href]="'#' + v" contentsLink>

[lmarcelocc]

Hey zurfyx!

How are you?

I was trying to fix my code and I'm seeing a problem with contentsLink.

Here my code:

<a matLine [href]="buildLinkWithAnchor(subCategory.name)">
  {{ subCategory.name }}
</a>

The buildLinkWithAnchor() method is just this:

  const rootUrl = this._router.url.split('#')[0];

  // Return Eg.: /questionnaire/context-and-scope#purpose-of-processing
  return rootUrl + '#' + new SlugifyPipe().transform(anchor);

But with contentsLink it crop to:

<a class="mat-line" contentslink="" matline="" **ng-reflect-href="/questionnaire/context-and-sco"**>
   ...
</a>

without the contentsLink the href is build well.

Meanwhile, let me ask you something, contentsSection will need /questionnaire/context-and-scope#purpose-of-processing or #purpose-of-processing will be enough having into account that I will need to set contentsLink to /questionnaire/context-and-scope#purpose-of-processing ?

Please let me know if I was not explicity enough.

Thank you again :D

[zurfyx]

Hey @lmarcelocc !

#purpose-of-processing should be enough given that the active section checking solely takes into account the section and link names.

When it comes to the link it's also better to have it as '#purpose-of-processing', this way it enables browsers scrolling down to that section without further page refreshes as well as transition scrolling with ngx-page-scroll.

[lmarcelocc]

Hey zurfyx,

damn, I'm stil not able to make this work. I'm getting the first of the list active, but nothing else works, even the scroll :(

Here's the code on pastebin:
https://pastebin.com/ceWYqCZa

Thank you!

[zurfyx]

A working jsFiddle/jsBin/codepen would make it possible for me to execute and see what your code is actually running.

From the pastebin I can notice that you're not binding the href in contentsLink.

<a href="{{buildLinkWithAnchor(subCategory.name)}}" contentsLink pageScroll>

should be

<a [href]="buildLinkWithAnchor(subCategory.name)" contentsLink pageScroll>

Although similar, they are treated differently. Angular will listen to binding changes, but it won't to HTML properties.

[lmarcelocc]

Hi zurfyx,

always learning with you :)

I've tried with <a [href]="...">...</a> as well but without success.

Will add the code to some online tool to share with you :)

thanks!

[lmarcelocc]

Hey!

I was adding the code to stackblitz and it's working fine. So probably, it could be same issue with some other dependency since on a clean project works fine.

Right now I'm blocked and don't know how to go further with this :/

[zurfyx]

Hey @lmarcelocc , you might also want to have a look at the #3 resolution.

[lmarcelocc]

Hello zurfyx,

I've the "rxjs": "^5.5.2" and yes, I'm doing on a separated module too but I was import everything on it.

I've tried on the entry component as well but without success. On a new project I can make it work. It's weird :S

Thanks.

[lmarcelocc]

Zurfyx,

Can I upload my code somewhere for you be able to give it a look?
I don't want to abuse, so let me know if you can't or don't want ;)

Thanks!

[zurfyx]

I'll see what I can do, if the project isn't too big I might be able to have it a look. Otherwise, you will probably know way more than I do about your project. If it worked for you on an empty project, it's probably because some sneaky mistake that's probably hard to spot at a glance.

[lmarcelocc]

Hi zurfyx,

I'm not so crazy :D

I'm starting the project and it's not that big, but off course that I've just uploaded the minimal code to reproduce the problem :)

Here it is:
https://github.com/lmarcelocc/toc

I definitely need to pay you a 🍺 (or other thing if y don't like beer :] )

Thank you so much again for your time and your support!

[zurfyx]

Hey @lmarcelocc,

Sorry for the delay in the response. I'm having some problems to load your project.

Seems like I'm missing all _models

[at-loader] ./src/app/_services/authentication.service.ts:15:18
    TS2304: Cannot find name 'IUser'.

Something about ContextService

[at-loader] ./src/app/resolvers/category.resolve.ts:3:10
    TS2305: Module '"/tmp/Downloads/toc/src/app/_services/index"' has no exported member 'ContextService'.

and the config/env is missing

ERROR in ./src/app/_shared/noop.interceptor.ts
Module not found: Error: Can't resolve '../config/env' in '/tmp/Downloads/toc/src/app/_shared'
 @ ./src/app/_shared/noop.interceptor.ts 8:0-36
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts

You should probably add /node_modules and /.awcache to .gitignore. I'd generally submit a PR but I won't since you say that this is just a part of the project.

Also, did you write that boilerplate and package.json yourself? That's a hell of a lot of work. My personal recommendation is to get started with angular-cli, it's cleaner and its always up to date with the latest Angular, unless you need some special webpack configuration.

[lmarcelocc]

Hey zurfyx,

please do not apologize for the time you took to response, your doing me a big favor :)

So, I've fixed all the issues you had setting up the project.

I've added the .gitignore I'm using in the project also, it wasn't there and I don't know why!

Since I was new to webpack, I tried something that could help me, so I went to this. But yes, one thing that's in my TODO list is to change it to angular-cli, I just need to give a good read at weback documentation, it doesn't seem so hard.

Please let me know if you still have any issue.

PS: Thank you for the PR advise, but yes this is just a small part of the project, now it should be working fine.

Have a nice week :D and thank you!

[zurfyx]

Hey @lmarcelocc , good news!

The problem relied in Angular Material body container.

What .mat-drawer-content does it encapsulate the content inside another container that acts like a body.

The container feature that was released yesterday fixes this by enabling you to customize the container you want to use (instead of the default one, which is either the window or document).

[scrollingView]="document.querySelector('.mat-drawer-content')" -> you will have to update the dependency before making use of so. For some reason, I got some errors which you might know better about. Either way I'll test it later on a project of mine to make sure the new library version is still working OK.

When it comes to the Table of Contents not scrolling down, it is pretty much for the same reason, but it is not implemented yet. I will try to have it working by the end of the week.

The future syntax will be pretty much the [scrollingView] above but written on the contentsTable element.

The scrolling library also requires some extra setup. I encourage you to read the new documentation.

[zurfyx]

Hey @lmarcelocc, feature is complete and ready to use as of v2.1.0! You can check their documentation and the demo here and here.

[lmarcelocc]

Hey zurfyx.

That's great!

I will test it soon.

Thank you so much!

will give you feedback after test it :D